Question

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

当我尝试在localhost中运行index.html，即， xampp服务器时，我得到一个空白页。

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

Answer 1

首先在项目根目录中创建 vue.config.js 文件，然后使用以下代码在其中定义基本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

Answer 2

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

喜欢的东西 file:///Users/brianvoelker/Desktop/websites/vue-build/docs/index.html 因此，在该示例中，它试图在file:///中查找文件，当然不存在。

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

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

Answer 3

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

npm run build效果非常好，它会为manifest.#.js，vendor.#.js和app.#.js

创建一组缩小的文件

在Google Chrome的开发者工具中打开网络标签，查看哪些文件已加载。如果没有加载任何js文件，则需要执行路径配置，以便服务器提供正确的文件。

您可能需要稍微调整index.html文件以使其完全符合您的要求，并将js文件从dist/static文件夹移至您首选的位置。只要app文件以正确的顺序提供，url路径就无关紧要了。

Answer 4

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

assetsPublicPath: '/',

到

assetsPublicPath: '',

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

Answer 5

我遇到了同样的问题，我通过从dist / index.html文件中删除“ /” 解决了该问题。我有这样的东西：

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

我将其更改为：

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

Answer 6

我遇到了类似的问题，以上信息对我有帮助。但是，我发现如果您在VueJS CLI webpack工具的config文件夹中编辑index.js文件并编辑＆quot; assetsPublicPath：＆＃39;变量为＆＃39; ./'来自默认＆＃39; /＆＃39;然后将来的构建将在静态文件夹中找到对css和js文件的正确引用。

Answer 7

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

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

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

Answer 8

我遇到的情况相同，但问题不同，我使用了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>

Answer 9

我在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.js Build不能使用npm run build

9 个答案: