vue项目打包后css图片路径出错问题

vue项目打包后出现白屏原因：第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。第二种：由于把路由模式mode设置成history了，默认是hash,即url地址带有#

第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。

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

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

就可以了。

第二种：由于把路由模式mode设置成history了，默认是hash。

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

所以只要删除mode或者把mode改成hash就OK了。