Vue项目打包后打开空白解决办法

前言

问题描述：Vue项目打包后，打开index.html出现空白页面

一、出错分析？

这个主要原因是路径的问题。

二、解决方法

1.修改config下的index.js中bulid模块导出的路径

config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。


assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’

2.修改src里边router/index.js路由配置

如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。

3.修改build/utils.js文件中相应位置修改

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
	return ExtractTextPlugin.extract({
		use: loaders,
		fallback: 'vue-style-loader',
		publicPath: '../../' //添加了这行代码，解决打包后字体图标和图片不显示的问题
		})
	} else {
	return ['vue-style-loader'].concat(loaders)
}

1
2
3
4
5
6
7
8
9
10
11
12

完美解决空白页面的问题: