Vue开发环境和生产环境的代理配置

(1)在vue项目中有两个关键的环境配置文件：

• .env.development
• .env.production

(2)一个表示开发环境，一个表示生产环境，建议在项目搭建初期就创建好这两个文件

开发环境配置：

.env.development配置

VUE_APP_BASE_URL=/api

其中VUE_APP_BASE_API是Vue的关键后端请求地址，我们可以在nodejs项目的任意js代码中获取环境变量，例如在创建axios请求实例对象时，通过process.env.“环境变量的KEY”

(3)对于开发环境的地址配置我们是可以在vue.config.js中直接配置代理方式的，这里的代理是对请求路径的代理，也就是axios的请求路径（简单点理解就是对路径进行替换），例如以下代码，我们将/api这个路径代理到了target指向的真实的后端地址。但是要注意此处的用法仅限于开发环境，也就是npm run运行的场景，对生产环境是无效的。

module.exports = {// 1.配置方式一: CLI提供的属性outputDir: &＃39;./build&＃39;,// publicPath: &＃39;./&＃39;,devServer: { //这里都是配置开发环境参数proxy: { //设置开发环境代理&＃39;^/api&＃39;: { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定target: &＃39;http://152.136.185.210:4000&＃39;, //代理的目标地址(后端设置的端口号)pathRewrite: { // 重定向&＃39;^/api&＃39;: &＃39;&＃39;},changeOrigin: true //是否设置同源，输入是的}}},

(4)生产环境配置：

下面介绍生产环境的配置，生产环境其实就是我们通过npm build出来的包，有一个index.html的网页入口。贴一下生产环境的配置：

.env.production配置

VUE_APP_BASE_URL=http://175.178.194.244/api


(5)最后在request的文件中写上引用的地址

const BASE_URL = process.env.VUE_APP_BASE_URL
const TIME_OUT = 10000export { BASE_URL, TIME_OUT }