vue 中使用.env文件配置全局环境变量

.env 全局默认配置文件
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
使用在文件根目录下创建该文件。
其中，.env.development 与.env.production会覆盖.env 的全局属性。
.env.development 为npm run serve 即开发环境中加载。
.env.production 为npm run build 即生产环境中加载。

全局属性 自定义命名

VUE_APP_NAME = ''
VUE_APP_是规定的命名格式，NAME则是自定义的名称

获取全局属性

process.env.VUE_APP_NAME 获取环境变量 NAME是自定义的名称

例子

.env.development

ENV = development

# url
VUE_APP_URL = http://192.168.1.110:8000

.env.production

ENV = production

# burl
VUE_APP_URL = http://192.168.1.109:8000

调用
main.js中使用例子

//定义全局$baseUrl
// 使用 this.$baseUrl
Vue.prototype.$baseUrl = process.env.VUE_APP_URL;

vue.config.js 中使用例子

  devServer: {
    
    

    port: 8088,
    proxy: {
    
    
      //匹配代理的url
      '/api': {
    
    
        // 目标服务器地址
        target: process.env.VUE_APP_URL,
        ws: true,
        //路径重写
        pathRewrite: {
    
    
          '^/api': ''
        },
        changeOrigin: true
      }
    }
  },