vue配置环境变量，通过环境变量配置devServer.proxy和axios的baseURL

模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

环境变量#

你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

.env.development：开发环境下的配置文件
.env.production ：生产环境下的配置文件
如果没有配置这两个文件，运行 npm run serve 时，process.env.NODE_ENV 的值默认就是 development；运行 npm run build 时，process.env.NODE_ENV 的值默认是 production

"scripts": {
    "serve": "vue-cli-service serve",//development开发环境
    "build": "vue-cli-service build",//production生产环境
    "lint": "vue-cli-service lint"
 },

 示例：

.env.development

NODE_ENV = 'development'

VUE_APP_BASE_API = 'http://xx.xxx.xxx.xx:xxx:xxxx/api'

VUE_APP_BASE_URL = 'http://xxx:xxxx'

VUE_APP_BASE_NAME = '/api'

vue.config.js

devServer: {
    // port: 6666,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [process.env.VUE_APP_BASE_NAME]: {
        target: process.env.VUE_APP_BASE_URL,//代理地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          ['^'+process.env.VUE_APP_BASE_NAME]: ''
        }
      },
    }
  },

配置axios

const http = axios.create({
    withCredentials: true,// 指定某个请求应该发送凭据。允许客户端携带跨域cookie，也需要此配置
    baseURL: process.env.VUE_APP_BASE_URL, // 所有请求的公共地址部分
    timeout: 3000 // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
})