使用 vue 项目打包后，尝试使用打开 dist 目录下的 index.html，页面空白

最新推荐文章于 2025-06-20 20:07:16 发布

置顶随遇而安、1314

最新推荐文章于 2025-06-20 20:07:16 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 项目打包页面空白

本文链接：https://blog.youkuaiyun.com/LonewoIf/article/details/85652131

vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了解决使用vue-cli打包项目后，尝试在dist目录下直接打开index.html导致页面空白的问题。通过修改config/index.js中build配置的assetsPublicPath参数为'./'，可以确保静态资源正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：使用 vue-cli 打包项目后，尝试使用打开 dist 目录下的 index.html，页面空白。
解决办法：打开 config 文件夹里的 index.js，修改 build 里 assetsPublicPath: '/'，为 assetsPublicPath: './'，再次执行 npm run build 能够正确显示。代码如下：

build: {
	index: path.resolve(__dirname, '../dist/index.html'),
	assetsRoot: path.resolve(__dirname, '../dist'),
	assetsSubDirectory: 'static',
	assetsPublicPath: './',
	productionSourceMap: false,
	devtool: 'source-map',
	productionGzip: false,
	productionGzipExtensions: ['js', 'css'],
	bundleAnalyzerReport: process.env.npm_config_report || false,
	generateAnalyzerReport: process.env.npm_config_generate_report || false
}

其他补充：

1、如果 vue-route 是 history 模式时，打包前需要修改 config 文件夹里的 index.js，build 里面的 assetsPublicPath: "/" ，此时 url 里面没有 #；
2、如果是 hash 模式时打包前修改 config 文件夹里的 index.js，build 里面的 assetsPublicPath: "./" ，此时 url 里面有 # 。