Vue 打包后打开为空白页面 并且控制台报错‘Failed to load resource: net::ERR_FILE_NOT_FOUND’

问题描述

当我们开发完成后进行 npm run build打包后形成dist文件 我们通过访问dist文件中的index，会出现空白页面什么都不显示的问题，控制台中还会报‘Failed to load resource: net::ERR_FILE_NOT_FOUND’错误，其实是因为打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏，cli2.0和cli3.0解决办法不同

Vue cli2版本解决办法

很简单找到我们的 config文件夹下面的 index.js 配置文件

找到其中的 build 相关配置，assetsPublicPath 这一项默认配置的是‘/’ 我们将他改成 ‘./’

修改完成后，重新打包即可

Vue cli3版本解决办法

cli3和cli2形成的目录是不一样的，首先我们找到根目录中新建 vue.config.js 文件

• 文件中添加如下代码
  

	javascript
		module.exports = {
		 publicPath: "./" 
		};

第二个就是我们的路由文件中 如果要是选择的是 history 模式 我们需要将其注释掉

修改后再次打包就好了