VueJS - 在 npm run build 之后我得到了空白页

Posted 2023-02-22

【中文标题】VueJS - 在 npm run build 之后我得到了空白页

【英文标题】：VueJS - after npm run build I got blank page

【发布时间】：2018-05-27 13:17:22

【问题描述】：

在我运行“npm run build”之后，我在控制台中得到了这个提示：

构建完成。

提示：构建的文件旨在通过 HTTP 服务器提供服务。 通过 file:// 打开 index.html 将不起作用。

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

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

build
config
dist
node_modules
src
static
.babelrc
.editorconfig
.postcs-s-rc.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: '/',

我已将 assetsPublicPath: '/' 更改为 assetsPublicPath: './'，我也尝试了 assetsPublicPath: './public'，但仍然不行。

拜托，有人可以帮助我吗？

谢谢！

现在我真的很害怕，我正在本地服务器上使用 Vue 版本 2.5.2 构建一个 Web 应用程序，运行“npm run dev”后一切正常，但在生产服务器 (Apache) 上运行构建后我得到了空白页...没有人知道这个问题...我已经更改了 config/index.js，添加了相对路径、./、/，甚至是绝对路径（我从不使用绝对路径），我在 Github 中询问过论坛，没有答案...另外，控制台日志浏览器中没有错误。

【问题讨论】：

如果你把assetsPublicPath: '/',改成assetsPublicPath: './',会怎么样

是的，我做到了，然后再次运行 npm run build，仍然无法正常工作。谢谢！

重新加载您的应用并再次检查您的日志。它应该工作。在任何情况下你都不应该在 webpack 中使用绝对路径/，你必须使用相对路径

嗯，我做到了，日志中没有错误，缺少什么？...

还要确保您的服务器（MAMP/XAMP 等）指向由npm run build 创建的dist 文件夹

【参考方案1】：

假设您使用的是webpack template for vue cli，这就是它的样子，这应该会有所帮助。了解区别可能有用的原因是，如果您要使用webpack-simple template，它有一个webpack-config.js 文件，直接使用publicPath property from webpack（而不是assetsPublicPath）。

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

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

这是我的配置作为 sn-p 的样子。

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

【讨论】：

是的，我正在为 Vue CLI 使用 Webpack 模板。我已经尝试过你的建议，不起作用，令人沮丧。我有另一个使用 Vue 2.1.0 构建的项目，没有“config/index.js”并且在同一台服务器上工作正常，现在我使用的是 Vue 2.5.2 版。我不想回到旧版本...知道吗？还是谢谢！

config/index.js 应该是您提到的 public/config/index.js，其中包含一些用于构建（和开发）执行的配置信息。

@EricMcCormick 错误：禁止您的客户端无权从该服务器获取 URL /。此错误是因为 docker 无法通过 httpserver 为 index.html 提供服务？

@LOG_TAG 禁止错误将是服务器配置问题。根据 vue cli，上面的问题和答案与前端资产构建配置有关，与服务器响应无关。听起来您知道它与通过 docker 设置中的配置提供服务有关，所以在我看来，您的问题很可能是它自己的问题和答案。如果您在某处有 SO 问题的详细信息，我可以看看；否则祝你好运！

【参考方案2】：

我一直在寻找同样的问题（npm run dev 工作但 build 有一个空白页）。

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

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

【参考方案3】：

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

来自 VueJs 文档：

....要解决此问题，您需要做的就是向您的服务器添加一个简单的全能后备路由。如果 URL 与任何静态资源不匹配，它应该提供与您的应用相同的 index.html 页面。(https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode)

因此，启用历史模式所需要做的就是添加一条包罗万象的路线：

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

注意：这个包罗万象的路由应该在底部——在所有其他路由之后（否则，所有请求都会去它）。

【参考方案4】：

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

module.exports = 
    publicPath: ''

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

【参考方案5】：

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

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

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

【参考方案6】：

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

我希望这对某人有帮助

【讨论】：

这有什么关系？

这是我遇到的确切问题，npm run build 显示空白屏幕，但这是因为 Vue 在开发中抛出严重错误作为警告，空白屏幕问题也可能是由你的代码中有一个错误......这就是我的观点

【参考方案7】：

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

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

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

然后npm run build

我使用 vscode 的实时服务器检查了它，它可以工作