概述
之前使用vue-cli创建项目
时,使用process.env.变量名
获取环境变量(在根目录下配置环境配置文件之后)。
今天使用vite+vue3
创建项目时,使用相同的方法却获取不到,还报以下错误,这是为什么呢?
问题解决
后来查看了VITE官网才知道,使用vite+vue的时候环境变量的获取方式变成如下:
import.meta.env.变量名
console.log( import.meta.env) //查看相关信息 这里不显示非VITE开头的变量
注意
- 必须要以”VITE_“开头的变量才能被识别读取,否则无法获取
// .env.development
NODE_ENV=development
VITE_APP_BASE_URL='http://localhost:xxxx'
如果不想使用VITE开头自己修改就在vite.config.ts文件中添加envPrefix:“APP_”
//vite.config.ts
export default defineConfig({
plugins: [vue()],
envPrefix:"APP_", //APP_ 为自定义开头名
})
- 需要在最新的vite版本下才会生效,旧版本会导致build报错
- import.meta.env,有几种内建变量,如下所示:
MODE:用来指明现在所处于的模式,一般通过它进行不同环境的区分,比如 dev、test、pre、prd 等等,默认为:“development”
BASE_URL:用来请求静态资源初始的 url
PROD:用来判断当前环境是否是正式环境
DEV:用来与 PROD 相反的环境
SSR:用来判断是否是服务端渲染的环境
注:更多的使用方式请看官网VITE
参考文档:Vue3+Vite使用环境变量.env的一些配置