vue项目打包访问index.html页面出现空白

（vue-cli2.x版本）项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。

vue-cli项目打包：

1. 命令行输入：npm run build

打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。

 

错误现象：

1.主要的问题就是路径问题

全是css，js路径引用错误的问题。

因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。
只要修改config文件夹里的index.js里的assetsPublicPath的值；

config/index.js

assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’
其中注意的是在config文件夹里的index.js里的assetsPublicPath有两个，只要修改第二个assetsPublicPath的值就可以了。
 

2.router-view中的内容显示不出来。路由history模式。

在src里边router/index.js路由配置里的默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把原来的模式配置删除，让它默认的就行 。

解决：// mode: 'history',//将这个模式关闭就好 

如果非要使用history模式的话(需要和后台一起配合使用)，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。

如果不会打包vue项目，请看我写的另外一篇详细教程：Vue webapp项目通过HBulider打包原生APP

解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题_vue3打包之后index页面空白-CSDN博客