0

这是一个菜鸟问题。我正在尝试对 Electron、Vue、Webpack 和 Node 采取一些步骤。为此，我使用 electron-forge 将样板项目作为起点，如下所示：

npx create-electron-app my-project --template=typescript-webpack

创建项目后，一切（似乎）都按预期工作。如果我进行任何编辑，我可以看到 webpack 被调用，并且重新加载内容会显示我的编辑。到现在为止还挺好。

我的下一步是尽可能介绍最简单的 Vue.js 'hello world' 内容。首先，我使用 NPM 安装 Vue.js，如下所示：

npm 安装“vue”

然后我将样板 index.html 编辑为如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <h1> Hello World!</h1>
    <p>Welcome to your Electron application.</p>
    <div id="vue-app">
      {{ message }}
    </div>
    <script>
      var app = new Vue({
        el: '#vue-app',
        data: {
        message: 'This message is from Vue!'
        }
      })
    </script>
  </body>
</html>

哪个不起作用。如果我更改脚本标签以使用 Vue.js 脚本的 CDN（而不是 node_modules 文件夹），一切都会按预期工作。

我的结论是，虽然我可以在设计时在我的 node_modules 文件夹中引用 Vue.js，但在运行时我的输出中不存在该位置。我不确定这是由于 webpack 的配置方式，还是由于电子的工作方式 - 但它强烈暗示我必须做一些事情，无论是通过编程方式还是通过 webpack 配置来正确引用脚本。

那么“引用”本地 Vue.js 脚本的正确方法是什么？

谢谢！

4

2 回答 2

0

您需要通过 webpack 之类的捆绑程序引用 vue（否则，就像您说的，它在运行时不可用）。您的方法不起作用，因为生成的文件结构与“设计时间”期间的文件结构不同

这是一个使用 vue-cli 设置启动项目的示例：

npm i -g @vue/cli
vue create project-name
cd project-name
vue add electron-builder
npm install

完毕。您的项目正在运行。

如果您使用的是 vue-router，稍后会遇到一点警告。添加以下内容router.js（它将路由器模式更改为哈希而不是历史记录，因此它可以与电子一起使用）。

export default new Router({
    mode: process.env.IS_ELECTRON ? 'hash' : 'history',
})

作为旁注，vue-cli 抽象了很多配置。如果您迷路了，只需将其打印出来

vue inspect > ./app/inspect.js.md

（> 之后的部分表示保存到指定文件，否则它会在您的控制台中打印出来。）检查一下，这是您正在寻找的正确设置，只是使用 vue-cli 自动创建的。

另外，查看生成的/public/index.html，它没有提到导入 vue ;)

祝你好运

于 2020-06-07T22:51:53.527 回答
0

经过一番修修补补，我想出了这个解决方案：

的HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1> Hello World!</h1>
    <p>Welcome to your Electron application.</p>
    <div id="vue-app">{{ message }}</div>
  </body>
</html>

然后我在 electron-forge 样板文件renderer.ts中添加了一个 import 语句，如下所示：

import './vueapp.js';

最后，我创建了一个名为vueapp.js的新脚本文件，如下所示：

import Vue from 'vue/dist/vue.js';

var app = new Vue({
  el: '#vue-app',
  data: {
    message: 'Hello Vue!'
  }
});

我欢迎反馈和评论；这可能是也可能不是正确的方法，并且很想听听其他人是如何做到的。

于 2020-06-08T16:11:25.200 回答