webpack打包优化

项目开始时：

vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。
webpack打包作用

一、配置proxy跨域

module.exports = {
   
devServer: {
   
 open: false, // 自动启动浏览器
 host: '0.0.0.0', // localhost
 port: 6060, // 端口号
 hotOnly: false, // 热更新

 overlay: {
   
    //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
    warnings: false,
    errors: true
  },
  proxy: {
   
    //配置跨域
    '/api': {
   
      target: 'https://www.test.com', // 接口的域名
      // ws: true, // 是否启用websockets
      changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
      pathRewrite: {
   
        '^/api': '/'
      }
    }
  }
}
}

proxy是代理的意思
代理跨域就是在欺骗浏览器 让浏览器认为你访问的还是 同源的localhost：8080 ，但是用代理把地址代理到了需要跨域的地址去了
首先第一步把vue.config.js放在项目的根目录下
然后重启项目
在这里代理的关键字是/api，也就是在之后请求的时候 在路径前拼接/api
如果用http 必须要把baseurl删除

配置完成后，当我们在去请求https://www.test.com/v1/api/userinfo接口时，就可以这么写

this.axios({
   
url:'/api/v1/api/userinfo',
method:'get'
}).then(res=>{
   
//......
})

二、配置alias别名

在vue项目开发中，组件化开发是我们不得不经常引用组件或插件，一些路径被频繁使用，为了简化代码，方便开发，我们将这些频繁使用的路径定义成简单的名字。

//加载path模块
const path = require('path')
//定义resolve方法，把相对路径转换成绝对路径
const resolve = dir => path.