526互联

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

发布时间 2023-12-06 22:20:27作者: 有何和不可

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)