Question

在我运行＆＃34; npm run build＆＃34;之后，我在控制台中得到了这个提示：

构建完成。

提示：构建的文件应通过HTTP服务器提供。打开index.html over file：//无法工作。

在我的本地服务器中，npm run dev工作正常，但在Apache服务器上传项目后，安装了node_modules（npm install）并运行＆＃34; npm run build＆＃34;，我在控制台中得到了提示和一个空白页面，我的浏览器中的开发控制台没有错误

服务器（Apache）上的路径是：/ mydomainproject / public / projects文件：

build
config
dist
node_modules
src
static
.babelrc
.editorconfig
.postcssrc.js
index.html
package.json
package-lock.json
.htaccess

这是我的public / config / index.js

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

我已经更改了资产公共路径：＆＃39; /＆＃39;到assetsPublicPath：＆＃39; ./'，我也尝试过assetsPublicPath：＆＃39; ./ public＆＃39;，但仍然无效。

请有人可以帮助我吗？

谢谢！

现在我真的很害怕，我在本地服务器上使用Vue版本2.5.2构建一个Web应用程序，运行后一切运行良好＆n; 34运行dev＆＃34;但运行后在生产服务器上构建（Apache）我得到了空白页...没有人知道这个问题...我已经改变了config / index.js，添加了相对路径，。/，/，甚至绝对路径（我从不工作）在绝对路径上），我在Github论坛上问过，没有答案......而且，控制台日志浏览器中没有错误。

Answer 1

假设您正在使用webpack template for vue cli，这就是它的样子，这应该会有所帮助。这可能有助于了解差异，因为如果您使用webpack-simple template，它有一个webpack-config.js文件，直接使用publicPath property from webpack（相对于assetsPublicPath）。

不久之后我遇到了似乎相同的情况。这似乎是由于我使用本地开发服务器npm run dev在根级别将事物实例化到我的本地开发服务器，而不是我的生产路径，它是服务器上的子目录。我通过更改您提及的assetsPublicPath属性来解决此问题，仅针对build中的config/index.js配置。

将assetsPublicPath设置为空字符串应使构建方面路径相对于网络资产。它类似于写<script src="/path/to/my.js"></script>（绝对服务器）和<script src="relative/path/to/my.js"></script>（相对于脚本标签定义的html文件）的区别。

这是我的配置看起来像一个片段。

// config/index.js
...
module.exports = {
  build: {
    ...
    assetsPublicPath: '',
    ...
  },
  dev: {
    ...
    assetsPublicPath: '/',
    ...
  }
}

Answer 2

我用同样的问题永远搜索了（npm run dev工作但是build有一个空白页面）。

如果您的项目最终会在子文件夹中的服务器上，则可以在/config/index.js文件中更新assetsPublicPath。但是，最终对我有用的是我在路由器设置中使用mode: 'history'。这在开发期间没有问题，但在构建中它不起作用。

此处列出了有关将服务器配置为work with history mode here的详细信息。但我现在并不想弄乱服务器设置，如果我没有使用历史模式，那么它立即为我工作。

Answer 3

我遇到了同样的问题，并且在删除mode: 'history'中的vue-router时没有出现黑页（如Dean所述）。

从VueJs文档中：

....要解决此问题，您需要做的就是向服务器添加一条简单的“全部捕获”后备路由。如果该网址与任何静态资产都不匹配，则该网址应与您的应用程序所在的index.html页面相同。（https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode）

因此，启用历史记录模式所需要做的就是添加一条全部捕获的路由：

{
   path: '*',
   name: 'catchAll',
   component: Home
}

注意：这条通吃的路线应该走在最下面-在所有其他路线之后（否则，所有请求都将到达该路线）。

Answer 4

我通过在根目录上创建vue.config.js文件来解决我的问题

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

注意：将 / dist / 更改为静态文件所在的文件夹名称

然后npm run build

我使用vscode的实时服务器对其进行了检查，并且可以正常工作

Answer 5

我也遇到了这个问题。我的 main.js 是这样的：

const vm = new Vue({
  render: h => h(App),
  router,
  })
}).$mount('#app')

“vm”变量从未在我的 main.js 中使用过。我认为 webpack 排除了未使用的变量。所以我初始化了“new Vue”而不将它分配给变量。问题解决了。

Answer 6

所以我遇到这个错误有一段时间了，我尝试了上面提出的所有解决方案，但似乎没有一个奏效。然后我注意到在开发中，有一个“你可能有一个组件渲染函数中的无限更新循环”警告，我一直忽略，在修复组件后，npm run build 开始运行良好。

我希望这对某人有帮助

Answer 7

也许解决问题的最简单方法是在项目的根目录中创建一个文件 vue.config.js 并在其中添加以下代码：

module.exports = {
    publicPath: ''
}

在我的情况下，这解决了问题。信息来源：见here。

VueJS - 在npm运行构建之后，我得到了空白页面

7 个答案: