vue cli3+配置开发环境跨域，统一api管理方法以及打包注意事项

最近新起了一个项目，基于vue cli3+ 自己搭建前端的项目框架，说一下配置开发环境跨域的方法
首先创建好项目后
可以发现没有cli2的config文件夹了
在根目录创建vue.config.js文件

vue.config.js

module.exports = {
  configureWebpack: config => {
    // 取消console打印
    if (process.env.NODE_ENV === "production") {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
    }
  },
  runtimeCompiler: true,
  lintOnSave: false,
  publicPath: "./", //输出的根路径  默认是/ 如果你的网站是app.com/vue 这更改此配置项
  devServer: {
    open: true,
    host: "localhost", // 设置主机地址
    port: "8080", // 设置默认端口
    overlay: {
      errors: false,
      warnings: false
    },
    proxy: {
      "/api": {
        target: process.env.VUE_APP_URL, //api服务器地址
        changeOrigin: true, //改变源
        pathRewrite: {
          //路径重写
          "^/api": "/"
        }
      }
    }
  }
};

说一下 process.env.VUE_APP_URL这个是怎么来的。
在项目的根目录创建.env文件,也就是配置文件,里面可以配置vue项目的参数

VUE_APP_URL=http://你的域名/XXXX

可以配置多个,取名规则就是VUE_APP_XXXX
现在，基本的开发跨域配置以及完成，下面开始封装axios请求
我默认你是已经npm install axios -S的了
所以在src文件夹下面新建utils文件夹，用来存放封装的js文件

里面新建request.js用来封装axios，api.js用来统一管理所有api接口，index.js用来封装一些函数
封装请求就不说了
说一下统一api管理
src/utils/api.js

技术有限，不会什么高级的写法，目前能想到就是这样写 “/api” 就是用来映射到接口地址的，可以支持多接口扩展

// 统一管理api 接口
let base = process.env.NODE_ENV === "development"? "/api" : process.env.VUE_APP_URL
let urlObj = {
  login: "/login", //登录接口
  sysUserInfo: "/sys/user/info", //获取用户信息
  logout:"/logout", //退出登录
}
for(let i in urlObj){
  urlObj[i] = base + urlObj[i]
}
export default urlObj

统一管理后，再到main.js导入

//导入baseUrl对象
import baseUrl from "@/utils/api.js";
//挂载到Vue原型上
Vue.prototype.$baseUrl = baseUrl; 

请求的时候

this.$http.get(this.$baseUrl.sysUserInfo,{}).then((res)=>{
	//你的逻辑代码
}).catch((err)=>{})

完美解决跨域
同时也解决了开发环境和打包后api路径不一致问题