vue .env环境变量配置 全局配置环境变量

根目录新建三个文件
开发环境 development
.env.dev
生产环境 production
.env.pro
测试环境 test
.env.test

开发环境 development

NODE_ENV = "development"
VUE_APP_BASE_URL = "接口请求开发地址" //替换成自己的api
VUE_APP_API = "开发环境地址"

生产环境development

NODE_ENV = "production"
VUE_APP_BASE_URL = "接口请求正式地址"
VUE_APP_API = "生产环境地址"

环境

NODE_ENV = "test"
VUE_APP_BASE_URL = "接口请求测试地址"
VUE_APP_API = "测试环境地址"

在package.json中更改或新增

  "scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:dev": "vue-cli-service build --mode dev",
    "build:test": "vue-cli-service build --mode test",
    "build:pro": "vue-cli-service build --mode pro"
  },

vue.config.js 如果没有vue.config.js 可以在根目录新建

  publicPath: '/',
  outputDir: 'dist', // 检查输出目录是否正确，可以尝试修改目录名
  assetsDir: 'assets', // 检查静态资源的输出目录是否正确
  devServer: {
      proxy: {
          '/api': {
              target: process.env.VUE_APP_BASE_URL, //API服务器的地址
              ws: true,  //代理websockets
              changeOrigin: true, // 虚拟的站点需要更管origin
              pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                  '^/api': ''
              }
          }
      }
  }
});

axios封装可以访问本人其它文章！