【问题记录】关于vue-cli项目build后，index.html无法在浏览器打开

第一种

如图：

打包后的index.html加载资源失败 > 提示报路径错误 > 需要我们对build操作进行一些path上的调整！

具体如下：

1、静态资源的绝对路径改为相对路径

config --> index.js --> build:{  assetsPublicPath: './'  }  

注意斜杠前面多加一个点哦

2、添加图片资源的访问路径

这一步新版本好像已经不需要了，所以只要上面那一个地方改下即可。

如果CSS中有涉及到引入图片路径的，则需要新增一行如下代码：

ExtractTextPlugin 如果没配置 publicPath 的话，默认会出现下面这种css图片路径报错：

改完之后，路径正常显示如下：

如果路径已经修改正确之后，又出现了新的问题，从报错到直接文件打不开了，那么请看下面的第二种情况。

 

第二种

history模式下不支持build后的index.html显示

如图：

这是由于Vue的路由模式所导致的，默认情况下，vue-router的模式为history模式，把它改为hash模式即可。

找到路由文件，比如 router.js --> mode: 'hash'

两种路由模式的区别，详见 ?【前端路由】Vue-router 中hash模式和history模式的区别