【D1n910】Vue项目和Nuxt项目添加proxy代理配置
正常操作，正常分析，大家好，我是D1n910。
开新的项目的时候，后端同学没有处理跨域的问题，导致本地调用服务的时候浏览器报送跨域问题，因为用的webpack，所以这边研究学习使用webapck的proxy来解决跨域的问题。
要点
（1）可以根据需要在本地随时切换请求不同域名
（2）可以webpack 的proxy代理请求跨域域名，不需要后端处理
* 以下会用 `diff` 的写法，请注意自行去掉 `+` 和 `-` 哦
Vue项目
步骤一：修改 package.json，添加环境变量文件
修改文件: package.json
+ "dev": "vue-cli-service serve --mode development",
+ "dev1": "vue-cli-service serve --mode development1",
其中关键是 mode 后面内容，模式自定义。
新建对应模式下的`.env`文件，后面带上对应 mode 名称
.env.{} 文件可以存储自己的各种环境变量
这里我们对于我们proxy的域名对应的环境变量自定义为 `VUE_APP_API_BASE_URL`
例子：
修改文件: .env.development1
内容：
+ #开发环境
+ VUE_APP_API_BASE_URL="http://dev1.nideyuming.com/api"
步骤二：修改 vue.config.js，添加 proxy 配置
module.exports = {
devServer: {
host: '0.0.0.0',
disableHostCheck: true,
proxy: {
'/api': {
target: process.env.VUE_APP_API_BASE_URL,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
关键就是在 `devServer` 添加了 proxy。
target属性的值取的是对应环境下的环境变量。
步骤三：启动
启动的时候运行环境对应的脚本命令即可
例子
yarn run dev
yarn run dev1
Nuxt项目
Nuxt项目用不了.env的文件，但是可以直接在启动命令里配置好环境变量，然后再获取。
步骤一：修改 package.json，添加环境变量
修改文件: package.json
+ "dev": "BASE_URL=http://dev.nideyuming.com/api/ nuxt dev",
+ "dev1": "BASE_URL=http://dev1.nideyuming.com/api/ nuxt dev",
步骤二：修改 vue.config.js，添加 proxy 配置
前面添加 proxy 变量，方便自定义配置
const proxy = {}
if (process.env.NODE_ENV === 'development') { // 只有在开发环境才会执行
proxy['/api/'] = {
target: process.env.BASE_URL,
changeOrigin: true,
pathRewrite: {
'^/api/': ''
}
}
}
在 module.exports 下添加 proxy
module.exports = {
...
proxy
...
}
步骤三：启动
启动的时候运行环境对应的脚本命令即可
例子
yarn run dev
yarn run dev1
END
