vue3-vite 设置环境变量和模式

一、设置模式

在package.json 中设置模式

  "scripts": {
    "dev": "vite --mode development",
    "build:beta": "vite build --mode beta",
    "build:release": "vite build --mode release",
    "serve": "vite preview"
  },

--mode 后为执行是对应的模式

二、新建对应模式的环境文件以及环境变量

.env.[模式名]

例如: .env.development    //在development模式下会读取该文件

# just a flag
ENV = 'development'

# base api
VITE_BASE_API='http://localhost/api'

VITE_LOGIN_URL= 'http://localhost:8080/#/login'

VITE_PUBLIC_PATH = ''

# version
VITE_VER_MAIN = '1'
VITE_VER_SUB  = '0.0'
VITE_VER_STATE = 'dev'

//环境变量需要以  VITE_  开头 (只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码)

三、在代码中使用对应的环境变量

Index.vue

<script>
export default {
  name:"Index",
  setup(){
    const ENV = import.meta.env
    console.log('ENV',ENV);//获取环境变量
  }
}
</script>

 

 

参考链接:Vite官方文档-环境变量和模式