vue2项目打包好之后index.html为空白_vue2项目打包dist后index为空

vue项目打包成功后生成dist文件，在dist文件里的index.html页面打开是空白的，并且控制台报错：

报错的原因在于index.html页面里引入文件的路径有问题
我们可以在官网上找到vue cli的配置参考

解决方案：在vue根目录下创建vue.config.js文件在里面

module.exports = {
    publicPath: './',
};
vue2.0 打包之后 打开index.html出现空白页

1.打包之前修改三个文件
1.1.第一步，找到build文件，在webpack.prod.conf.js 第25行左右 有一个对象为 output,在这里面增加一行代码

publicPath:’./’

output: {
    //在这里加一行代码  
    publicPath:'./',
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
1.2.第二步，找到utils.js，在 第47行左右 有一个if判断为 if (options.extract),在这里面增加一行代码

 注意：这个是保证 加载背景图片等css样式资源不出现 路径问题
1
publicPath:’…/…/’

if (options.extract) {
  return ExtractTextPlugin.extract({
    publicPath:'../../',
    use: loaders,
    fallback: 'vue-style-loader'
  })
}

1.3.第三步，找到config/index.js第46行左右 修改assetsPublicPath 路径为 ‘./’;

2.然后你就可以 build 了，

3.如果build 完成后 在本地还是空白页 或者说 放到服务器上面 是空白页 怎么办

3.1 这个就有可能是 你的路由模式 出现了问题 你给的路由模式可能是history 模式 ，这个文档说了 如果设置这个模式的话需要后端的配合 设置一些参数的 ，所以如果没有后端的配合的话 ，你就把这个路由的mode 改为 hash 或者是直接删除 就是默认的模式了
————————————————
版权声明：本文为CSDN博主「_xixi_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/assgrsryiy12/article/details/108441264