在电子应用程序中使用 vue js 时出错

Question

我正在尝试在 Electron 应用程序中使用 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"}
        ]
    }
});

Answer 1

鉴于您的错误：

Uncaught Exception: ReferenceError: document is not defined at query

我假设您正在尝试在 主进程 中使用 Vue，不幸的是，如果没有像 jsdom 这样的东西，Vue 将无法做到这一点，因为 Vue依赖于 document，而主进程没有 document.

但是，我认为问题从根本上开始。您可能想从 Render Process 使用 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。

编辑 2016 年 11 月 4 日

Vue 现在也有 server side rendering，您可能想看看。

在电子应用程序中使用 vue js 时出错

Error when using vue js inside electron app

electron

编辑 2016 年 11 月 4 日