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

问题描述:使用 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-routehistory 模式时,打包前需要修改 config 文件夹里的 index.jsbuild 里面的 assetsPublicPath: "/" ,此时 url 里面没有 #;
2、如果是 hash 模式时打包前修改 config 文件夹里的 index.jsbuild 里面的 assetsPublicPath: "./" ,此时 url 里面有 # 。

猜你喜欢

转载自blog.csdn.net/LonewoIf/article/details/85652131