Vue CLI3打包后代码白屏问题如何解决？

本文共计850个文字，预计阅读时间需要4分钟。

前言：最近使用了vue-cli3.0开发了一个移动网页端项目，准备打包发布了。按照以往流程执行npm run build后，打开dist/index.文件发现白屏。打开调试后，发现文件引用路径不对。

问题分析：

1.打包后的dist目录中的index.文件中的资源路径不正确。

2.文件引用路径不对应，导致资源无法加载。

解决方案：

1.检查index.文件中的资源路径，确保与dist目录中的资源文件路径一致。

2.如果路径不正确，修改index.文件中的资源路径，使其指向正确的文件位置。

示例代码：

3. 如果修改路径后问题依旧，检查webpack配置文件（如vue.config.js），确保output.publicPath配置正确。

示例代码：javascript// 修改前module.exports={ output: { publicPath: '/' }}

// 修改后module.exports={ output: { publicPath: '/dist/' }}

4. 如果以上步骤都无法解决问题，尝试重新运行npm run build命令，查看控制台输出是否有错误信息。

通过以上步骤，应该可以解决dist/index.文件白屏的问题。

前言 ：

最近使用了vue-cli3.0 开发了一个移动网页端项目，准备打包发布了。按照以往的流程 npm run build

问题来了

打开 dist index.html 文件发现白屏。