Vue.js 构建不适用于 npm run build答案

【问题标题】：Vue.js Build not working with npm run buildVue.js 构建不适用于 npm run build
【发布时间】：2020-06-28 06:40:54
【问题描述】：

我正在尝试获取 vue.js 用于生产的源代码。我使用了这个命令npm run build。我有一个带有index.html 的dist 文件夹和一个名为static 的文件夹，其中包含所有css 和js。

当我尝试在 localhost、ie、xampp server 中运行 index.html 时，我得到了一个空白页。

vue.js 是否可以在 xampp 中运行。

【问题讨论】：

空白页可能是js出错了，能不能打开浏览器开发工具js控制台看看有什么问题？
你用过vue-cli吗？

标签： vue.js

【解决方案1】：

首先在项目根目录下创建vue.config.js文件，并使用下面的代码在其中定义base url

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

用您的文件夹名称替换 production-sub-path ... 例如。 http://www.example.com/production-sub-path/ ...并运行下面的命令来构建项目

npm run build

完成构建后...将 dist 文件夹中的所有文件复制/上传到您的 /production-sub-path/ 文件夹...就是这样

更多信息请查看官方文档 https://cli.vuejs.org/guide/deployment.html#general-guidelines

【讨论】：

对于那些收到以下错误的人：Invalid options in vue.config.js: "baseUrl" is not allowed 我可以通过将 baseUrl 更改为 publicPath 来修复它
如果使用 Vue CLI > 3.3 知道 baseUrl 已被弃用，应该使用 publicPath

【解决方案2】：

我之前也遇到过这个问题。我通过更改配置文件夹中的 index.js 文件解决了这个问题。在构建中，我改变了：

assetsPublicPath: '/',

到

assetsPublicPath: '',

并再次尝试 npm run build。我检查了 dist 文件并打开了 index.html 并且它工作正常，没有空白页。

【讨论】：

【解决方案3】：

我在 package.json 文件旁边创建了 vue.config.js

内容如下：

module.exports = {
    publicPath: ''
}

然后运行 npm run build

解决了我的问题

以下链接帮助了我

https://github.com/vuejs-templates/webpack/issues/310

https://cli.vuejs.org/config/#vue-config-js

【讨论】：

考虑到这对 Vue CLI > 3.3 是正确的，如果不是，你应该使用 baseUrl 来代替

【解决方案4】：

我遇到了同样的问题，我通过从 dist/index.html 文件中删除 "/" 解决了这个问题。我有这样的事情：

<script src=/js/app.632f4e30.js></script>

我把它改成：

<script src=js/app.632f4e30.js></script>

【讨论】：

【解决方案5】：

通常，当您进行生产构建时，在 index.html 文件中设置的路径会在其前面添加一个斜杠，这意味着它将在基本域中查找该文件。所以我猜你只是试图通过双击 index.html 文件并在浏览器中打开它来在浏览器中打开文件。

类似的东西 file:///Users/brianvoelker/Desktop/websites/vue-build/docs/index.html 所以在那个例子中，它试图在file:/// 中查找文件，当然不存在。

因此，您可以做两件事，打开 index.html 文件并删除开头的斜杠，或者只知道在部署时它会起作用，因为文件查找是相对于基本域的。

附：如果您正在寻找 cli 构建工具，请查看 Vue-build.com

【讨论】：

其实双击文件可以正确打开文件，问题是构建不成功，索引为空

【解决方案6】：

Vue.js 是一个浏览器端应用程序框架。服务器端技术无关紧要，除非您尝试进行服务器端渲染。

npm run build 工作得很好，它为manifest.#.js、vendor.#.js 和app.#.js 创建了一组缩小的文件

在谷歌浏览器的开发者工具中打开网络标签，查看正在加载的文件。如果没有加载任何 js 文件，则需要进行路径配置，以便您的服务器提供正确的文件。

您可能需要稍微调整index.html 文件以使其完全满足您的要求，并将js 文件从dist/static 文件夹移动到您的首选位置。 url 路径无关紧要，只要应用程序文件以正确的顺序提供即可。

【讨论】：

【解决方案7】：

我遇到了类似的问题，以上信息对我有所帮助。但是，我发现如果您在 VueJS CLI webpack 工具的 config 文件夹中编辑 index.js 文件，并将 'assetsPublicPath:' 变量从默认的 '/' 编辑为 './'，那么未来的构建将找到正确的引用到 static 文件夹中的 css 和 js 文件。

【讨论】：

【解决方案8】：

我已经通过在根目录下添加此代码解决了这个问题，

module.exports = {
     publicPath: process.env.NODE_ENV === 'production'
     ? './'
     : '/'
}

或者您可以从 dist 下创建的 index.html 文件中删除第一个“/”。例如 href=/js/chunk-vendors.7a32d01e.js 到 href=js/chunk-vendors.7a32d01e.js

【讨论】：

【解决方案9】：

我遇到了同样的情况，但有不同的问题，我使用了vuejs-webpack-project 项目并尝试在 IIS 服务器下运行输出文件。

index.html 中的这段代码不起作用：

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>vuejs-webpack-project</title>
  <link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>
<body>
  <div id=app />
  <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js />
  <script type=text/javascript src=/static/js/vendor.4ad267b4786a3ebd3327.js />
  <script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js />
</body>
</html>

此代码有效（需要更改脚本元素的结束标签）：

<body>
    <div id=app />
    <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
    <script type=text/javascript src=/static/js/vendor.4ad267b4786a3ebd3327.js></script>
    <script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js ></script>
</body>

【讨论】：