Vue 配置.env.pro和.env.dev文件

1、Vue2 配置

1.1 新建文件

• .env.development

VUE_APP_BASEURL='http://localhost:8081'

• .env.production

VUE_APP_BASEURL='http://localhost:8082'

1.2 访问

import Vue from 'vue'
// 配置全局请求地址
Vue.prototype.$baseUrl=process.env.VUE_APP_BASEURL
console.log(process.env.VUE_APP_BASEURL)

在vue页面访问直接使用 this.$baseUrl 即可

2、Vue3 配置

由于Vue3配置基于Vite所以与Vue2不同

2.1 新建文件

• .env.dev

NODE_ENV = development
VITE_API_BASE_URL='http://localhost:8081'

• .env.pro

NODE_ENV = production
VITE_API_BASE_URL='http://localhost:8082'

2.2 启动配置

"scripts": {
    "dev": "vite --mode dev",
    "pro": "vite --mode pro",
    "build:dev": "vite build --mode dev",
    "build:pro": "vite build --mode pro",
    "preview": "vite preview"
  }

2.3 获取

1、在Vue3中直接可以通过import.meta.env.VITE_API_BASE_URL获取

2、也可以getCurrentInstance().proxy.GLOBLE_URL 获取

import {getCurrentInstance} from "vue";

console.log(getCurrentInstance().proxy.GLOBLE_URL)