在电子应用程序中使用 vue js 时出错
我尝试在电子应用程序中使用 vue.js，但出现以下错误：
Uncaught Exception: ReferenceError: document is not defined at query (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:1070:10) at Vue._initProps (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:7254:23) at Vue._initState (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:7235:10) at Vue._init (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:2394:10) at new Vue (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:9000:8) at Object. (/Users/LM/Documents/mongoui/main.js:11:1) at Module._compile (module.js:425:26) at Object.Module._extensions..js (module.js:432:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:313:12)
这是我在
main.js
中加载 vue.js 的方式：
var Vue = require('vue');
new Vue({
el: "#app",
data: {
collections: [
{"name": "test 1"},
{"name": "test 2"},
{"name": "test 3"}
]
}
});
鉴于您的错误：
Uncaught Exception: ReferenceError: document is not defined at query
我假设您正尝试在
主进程
中使用 Vue，不幸的是，如果没有
jsdom
之类的东西，Vue 将无法做到这一点，因为 Vue 依赖于
document
，而主进程没有
document
。
但是，我认为问题从更根本的地方开始。您可能希望从
渲染进程
使用 Vue，因为那是可以访问
document
的地方。
本质上，Electron 中的主进程就像全能的控制器，它是您生成和管理渲染进程的地方。它没有引用任何单一的 DOM，因为主进程中不存在 DOM。相反，考虑渲染进程，渲染进程是像
BrowserWindow
这样的东西，它可以有一个 DOM。
所以，有了这些信息，我们可以尝试这样的事情：
main.js
:
// import { app, BrowserWindow } from 'electron';
var electron = require('electron'),
app = electron.app,
BrowserWindow = electron.BrowserWindow;
app.on('ready', function() {
var main = new BrowserWindow({ /* ... */ });
main.loadURL('file://' + __dirname + '/index.html');
});
然后，从你的渲染进程中：
index.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script>
var Vue = require('vue');
new Vue({
el: "#app",
data: {
collections: [
{"name": "test 1"},
{"name": "test 2"},
{"name": "test 3"}
]
}
});
</script>
</head>
<body id='app'>
</body>
</html>
当然，你可以随意重新组织文件，只要记住在渲染进程中使用 Vue，而不是在主进程中使用。
编辑 11/4/2016
Vue 有 服务器端渲染 现在也可能需要查看。