在这次的项目中，遇到了后端配置了允许跨域，但是我这边请求的时候还是提示跨域，后端折腾了会，我说算了，我这边本地做一下代里还快一点，你继续整接口吧。
所以就用到了 webpack-dev-server 的 proxy，但是有一些部分我并没有整明白，所以写一篇文章梳理一下。
最简单的就是直接在 webpack 的配置文件中启用 proxy 就可以了，
module.exports = {
publicPath: "./",
outputDir: "./dist",
lintOnSave: true,
css: {
loaderOptions: {
....
},
},
devServer: {
proxy: {
"/api": { // 这里的api可以是 / 也可以是具体的path也可以配置多个
target: "http://www.domain.com/", //对应自己的api接口
changeOrigin: true, // 如果接口跨域，需要配置这个参数
secure: false, // 如果是https接口，需要配置这个参数
},
},
},
};然后再请求的配置文件中修改地址为启动的服务地址就可以初步实现了。
改编成生产环境的时候就需要去修改配置文件，我就觉得很麻烦，一点也不优雅，所以就需要用到环境变量来配置代里。
VueCLI 4x中通过为 .env 文件增加后缀来设置某个模式下特有的环境变量，例如在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。
development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit
所以默认你不需要配就可以在 run serve 时读取 .env.development 的配置，同理 build 时会读取 .env.production 的配置。
附
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：
console.log(process.env.VUE_APP_SECRET)在构建过程中，process.env.VUE_APP_SECRET 将会被相应的值所取代。在 VUE_APP_SECRET=secret 的情况下，它会被替换为 “secret”。
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：
NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。