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

【问题标题】：Error when using vue js inside electron app在电子应用程序中使用 vue js 时出错
【发布时间】：2016-04-01 00:50:42
【问题描述】：

我正在尝试在电子应用程序中使用 vue.js，但出现以下错误：

未捕获的异常：ReferenceError：文档未定义在查询（/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:1070:10）在 Vue._initProps (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:7254:23) 在 Vue._initState (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:7235:10) 在 Vue._init (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:2394:10) 在新的 Vue (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:9000:8) 在对象。 (/Users/LM/Documents/mongoui/main.js:11:1) 在 Module._compile (module.js:425:26) 在 Object.Module._extensions..js (module.js:432:10) 在 Module.load (module.js:356:32) 在 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"}
        ]
    }
});

【问题讨论】：

标签： electron

【解决方案1】：

鉴于您的错误：

未捕获的异常：ReferenceError：查询时未定义文档

我假设您正在尝试在 主进程 中使用 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 而不是主进程。

2016 年 11 月 4 日编辑

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

【讨论】：