vue-cli3.0 打包生成空白页，路径出错

问题就是vue项目打包后，打开的是空白页面，，还有很多的文件路径的错误

网上找了很久，大多是脚手架2的解决方法

脚手架3的解决方法和脚手架2差不多，不过脚手架3取消了的很多的配置文件，所以需要在项目根目录下创建文件名为vue.config.js的配置文件(必须是这个文件名，不然读取不到)
在这里插入图片描述
文件中的内容如下：


const path = require('path')
 
module.exports = {
  // 对象和函数都可以，如果要控制开发环境可以选择函数
  configureWebpack:{
      resolve:{
        alias:{
          'assets':path.resolve('./src/assets'),
          'common':path.resolve('./src/common'),
          'components':path.resolve('./src/components'),
          'network':path.resolve('./src/network'),
          'views':path.resolve('./src/views')
        }
      }
    },
    devServer: {
      proxy: {//配置跨域
          '/apis': {
              target: 'http://pv.sohu.com',//
              ws: true,
              changOrigin: true,//允许跨域
              pathRewrite: {
                  '^/apis': ''//请求的时候使用这个api就可以
              }
          }
      }
  },
  //修改打包路径规则
  ///上面的可以不需要，重点在这
  publicPath: './',//
  outputDir: 'dist',
  devServer: {
    proxy: {
      '/api': {
        target: '',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

如果还设置了路由的规则，及设置成了 history 模式，则需要将模式改回去或注释掉，不然静态文件依然找不到

const router = new VueRouter({
  mode: "history",//注意 打包时需要将该处注释 否则将出现静态文件找不到 
  base: process.env.BASE_URL,
  routes,
});

然后重新打包即可

若有es6的问题，则参考如下文章（虽然我的项目中也有es6的语法，但是好像并没有影响）
参考文章：https://www.jianshu.com/p/f6e3103a931f

小白爱记录，排错不迷路

vue-cli3.0 打包生成空白页，路径出错

猜你喜欢