vue项目打包后首页一片空白解决办法和具体原因总结

很高兴在万千文章中你看到本章，希望能为你解决问题！！！

在最初用vue+webpack+vue-router做项目的时候，在本地pc开发测试都是正常的，但是在把代码打包部署到测试服务器之后，访问项目首页总是白屏。

第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。
解决办法：修改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true


assetsPublicPath默认的是  ‘/’  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ ’;
再次执行 npm run build 就可以了。

感谢分享https://blog.csdn.net/dq674362263/article/details/81876445