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

v64noz0r 于 2022-12-08 发布在 Electron

关注(0)|答案(1)|浏览(182)

I'm trying to use vue.js inside electron app but getting the following error:
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)
This is how I load vue.js inside main.js :

var Vue = require('vue');

new Vue({
    el: "#app",
    data: {
        collections: [
            {"name": "test 1"},
            {"name": "test 2"},
            {"name": "test 3"}
        ]
    }
});

electron

来源：https://stackoverflow.com/questions/34472046/error-when-using-vue-js-inside-electron-app

1条答案

按热度按时间

1yjd4xko1#

鉴于您的错误：
未捕获的异常：引用错误：查询时未定义文档
我会假设您尝试在 Main Process 中使用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年4月11日
Vue现在也有server side rendering，你可能想看看。

赞(0）回复(0）举报 2022-12-08

我来回答

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

1条答案

相关问题

热门标签

最新问答