1,简介
一个项目可能会有开发版本、上线版本、测试版本等等多个版本,不同的环境会有不同请求api接口,就需更改一些基本配置,基本路径,服务器代理这种都要更改一遍,这时候就显得很麻烦,所以这里就使用了环境变量。若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生,我们只需做简单的配置,把环境状态切换的工作交给代码。
- 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能)
- 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别)
- 生产环境(上线阶段,正式对外发布的版本,一般会进行优化,关掉错误报告)
2,使用
[1]创建.env文件
- 直接在根目录下创建
.env
后缀的文件 - .
env
——全局的,没有设置其他环境变量时,会加载这个文件里的内容,比如所有版本都使用的是同一个接口地址时,就可以写在这一个文件里面就行 .env.development
——开发环境下的配置文件,会覆盖.env这个文件里定义的环境变量(比如执行npm run dev命令,会自动加载.env.development
文件).env.production
——生产环境下的配置文件,会覆盖 .env这个文件里定义的环境变量
[注] ".env.[name]"是可以自定义的,前提是得在package.json里面做对应的名称修改,只是没有修改的话会默认默认
#例如在配置文件中
"scripts": {
"dev": "vite --mode dev", //-开发环境时选择.env.dev作为环境配置文件
"build": "vite build",
"serve": "vite preview"
},
复制代码
[2]获取环境变量
之前使用vuecli构建的项目可以通过process.env
来获取环境变量,但是在vite中不允许了
console.log("环境变量=>",process.env) //error
复制代码
vite中需要使用import.meta.env来获取env对象了
//main.js
import { createApp } from 'vue'
import App from './App.vue'
console.log("环境变量=>", import.meta.env);
createApp(App).mount('#app')
复制代码
根据环境变量官方文档
Vite 在一个特殊的 import.meta.env
对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量:
import.meta.env.MODE
: {string} 应用运行的模式。import.meta.env.BASE_URL
: {string} 部署应用时的基本URL。他由base
配置项决定。import.meta.env.PROD
: {boolean} 应用是否运行在生产环境。import.meta.env.DEV
: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD
相反)。
[注] 在package.json中表示的环境变量的名称的优先级高于.env.[mode]文件中配置的
//例如在项目根目录下创建一个.env.dev文件
MODE_DEV=development //定义env对象的MOOD的名称
VITE_Name=jack
//package.json
"dev": "vite --mode dev",
复制代码
[注] 只有以 VITE_
为前缀的变量才会暴露给经过vite处理的代码。例如:才能通过import.meta.env.VITE_Name
相应变量的值。(vite环境下为VITE,vuecli环境下为VUE)
[2]配置文件说明
环境变量的权重
.env.[mode].local > .env.[mode] > .env.local > .env
复制代码
[3]配置文件中的变量名问题
我们在 Vue 的前端代码中打印出的 process.env
与 vue.config.js
配置文件中输出的可能是不一样的。
扫描二维码关注公众号,回复:
13404006 查看本文章
vuecli
- 推荐环境配置文件中以
VUE_APP_
开头(NODE_ENV
和BASE_URL
这两个特殊变量除外) - 这样才能在项目(客户端)代码中通过
process.env
获取到该变量(在配置vue.config.js(服务端)文件中取到) - 其原理为webpack DefinePlugin 内置插件的相关内容,将process.env注入到客户端代码中。
- 但是经过CLI封装后仅支持注入环境配置文件中以
VUE_APP_
开头的变量,而NODE_ENV
和BASE_URL
这两个特殊变量除外。
vite
- 为了防止意外地将一些环境变量泄漏到客户端,在vite中同理:要以
VITE_
为前缀的变量才会暴露前端代码(客户端) - 不同于vuecli可以在vue.config.js中直接通过
process.env
直接获取环境变量,在vite中是不可以直接使用import.meta.env
来获取的 - 这里有一个模式的概念,需要根据项目的一些需求来进行配置获取,详见官方文档吧
\