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

小白爱记录,排错不迷路

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值