这是一个菜鸟问题。我正在尝试一些简单的步骤，进入Electron，Vue，Webpack和Node。为此，我以 Electron 伪造为起点，制作了样板项目，如下所示:
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，但在运行时我的输出中不存在该位置。我不确定这是由于webpack的配置方式还是由于 Electron 的工作原理-但这强烈暗示我必须通过编程或通过webpack配置来正确引用脚本，这是我必须要做的事情。
那么“引用”本地Vue.js脚本的正确方法是什么？
谢谢!
最佳答案
您需要通过诸如webpack的 bundle 程序来引用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中添加以下内容(它将路由器模式更改为哈希而不是历史记录，因此可与 Electron 一起使用)。export default new Router({
mode: process.env.IS_ELECTRON ? 'hash' : 'history',
})
作为附带说明，vue-cli抽象了许多配置。如果您迷路了，只需将其打印出来即可
vue inspect > ./app/inspect.js.md
(>之后的部分表示保存到指定文件，否则它将在控制台中将其打印出来。)将其 checkout ，这就是您要查找的正确设置，只需使用vue-cli自动创建即可。
另外，检查生成的
/public/index.html，它没有提到导入vue;)祝你好运
关于vue.js - 我如何从 Electron 伪造样板中正确引用Vue.js node_module？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62249936/