vue项目打包后打开index.html页面显示空白以及图片路径错误的问题_vue2修改index.html目录

页面空白

原因：打包后的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在同一级目录下面。 所以要改为 ‘./ ’;

问题二：这个坑是当你使用了路由之后，在没有后端配合的情况下就手贱打开路由history模式的时候，打包出来的文件也会是一片空白的情况，

问题三：图片或字体路径不对问题

1.从下图可以看到，使用url-loader处理后的文件是在static目录下生成fonts目录下的文件。全部样式文件打包在css目录下app.************.css文件中。

2.打开app.******.css文件后，可以看到css中对字体的引入路径

解决办法：在build/utils文件中的下图所示位置添加 publicPath:’…/…/’

这样css文件中引入字体文件路径时就会加上…/…/了。部署到服务器，静态文件就不会报404了。