我如何正确引用 electron-forge 样板中的 Vue.js node_module？

Question

这是一道菜鸟题。我正在尝试对 Electron、Vue、Webpack 和 Node 进行一些初步的尝试。为此，我使用 electron-forge 制作了一个样板项目作为起点，如下所示：

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

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

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

npm install "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>

这是行不通的。如果我更改脚本标签以将 CDN 用于 Vue.js 脚本（而不是 node_modules 文件夹），一切都会按预期进行。

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

那么 'reference' 本地 Vue.js 脚本的正确方法是什么？

谢谢！

Answer 1

你需要通过像 webpack 这样的打包器来引用 vue（否则，就像你说的，它在运行时不可用）。您的方法将不起作用，因为生成的文件结构与您在 'design time'

期间拥有的文件结构不同

这是一个使用 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 ;)

祝你好运

Answer 2

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

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 './vueapp.js';

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

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

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

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

我如何正确引用 electron-forge 样板中的 Vue.js node_module？

How do i correctly reference Vue.js node_module from electron-forge boilerplate?

webpack

vue.js

electron

electron-forge