关于.env环境变量文件的配置与来源
前言:
相信有很多小伙伴在做vue项目的时候,在使用教程提供的模板的时候一定看到过这样的文件
而他们的内容更是让人摸不着头脑,不知道是用来干嘛的(以下是vite)
# .env.development
VITE_APP_CALLBACK=http://consult-patients.itheima.net
# .env.production
VITE_APP_CALLBACK=https://cp.itheima.net
当我们在查阅资料之后,才知道,.env.development
对应的是开发环境下的环境变量,.env.production
对应的是生产环境下的环境变量,而在项目中引用这个变量呢?
相信各大教程也提供了相应的使用方案,就是调用node的一个全局变量来使用,但是得分情况,分什么情况呢?就是vue-cli
和vite
的情况,这两种情况对定义环境变量和使用环境变量的方式不同,详解如下
1. 环境模式
Vue CLI 和 Vite 都支持多种环境模式,这些模式主要用于为不同的开发和部署场景提供不同的配置选项。下面是它们各自支持的环境模式:
Vue CLI
Vue CLI 默认支持以下三种环境模式:
development
:开发环境,一般用于本地开发调试。production
:生产环境,一般用于项目上线部署。test
:测试环境,一般用于执行单元测试和集成测试。
除了默认的三种环境模式外,还可以通过 .env
文件来定义其他的环境模式。例如,可以在项目根目录下创建一个 .env.staging
文件来定义一个名为 staging
的自定义环境模式。这样,可以在命令行中使用 --mode
参数来指定当前所使用的环境模式。例如,可以使用以下命令来启动一个名为 staging
的环境模式:
vue-cli-service serve --mode staging
Vite
Vite 默认支持以下两种环境模式:
development
:开发环境,一般用于本地开发调试。production
:生产环境,一般用于项目上线部署。
除了默认的两种环境模式外,还可以通过 .env
文件来定义其他的环境模式。例如,可以在项目根目录下创建一个 .env.test
文件来定义一个名为 test
的自定义环境模式。这样,可以在命令行中使用 --mode
参数来指定当前所使用的环境模式。例如,可以使用以下命令来启动一个名为 test
的环境模式:
vite serve --mode test
2. 在vue-cli
构建的项目中使用环境变量
- 定义环境变量
# 在vue-cli构建的项目中,只有使用VUE_APP_*定义的变量,才会被 webpack.DefinePlugin 嵌入到客户端侧的包中
VUE_APP_API_URL = http://localhost:8080/api
- 你可以在项目中这样使用这个变量
console.log( process.VUE_APP_URL )
-
除了
VUE_APP_*
定义的变量之外,在VUE-cli
项目中还有两个始终可用的全局变量NODE_ENV
和BASE_URL
-
NODE_ENV
:会是"development"
、"production"
或"test"
中的一个。具体的值取决于应用运行的模式。 -
BASE_URL
:- 会和vue.config.js
中的publicPath
选项相符,即你的应用会部署到的基础路径。 -
关于这两个变量我也举了一个使用的例子供大家参考
// vue.config.js module.exports = { // 根据当前环境来决定 publicPath 的路径 publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/' }
-
最后一个小点,就是有时候我们有时候有一些不该提交到代码仓库中的变量的时候,尤其是代码托管到公共仓库的时候,这时候为了造成不必要的麻烦,我们应该使用
.env.local
来代替,.local
的意思是可以被指定环境加载,但被git忽略,像其它模式的到环境变量,也可以添加.local
来实现这个效果
-
3. 在vite项目中使用环境变量
参考信息 环境变量和模式
-
首先,在vite中,使用环境变量是通过
import.meta.env.xxx
来引用,值得注意的是,它不支持动态引用,即import.meta.env[xxx]
是无效的,请使用静态字符串 -
vite也提供了许多的默认环境变量
-
只有
VITE_*
前缀的变量才会以字符串的形式暴露给客户端源码# .env.development VITE_API_URL = http://localhost:8080/apis # .env.production VITE_API_URL = https://test.api.com/apis
使用:
console.log(import.meta.env.VITE_API_URL) // 这行代码会在不同的环境变量下打印不同的值
m/apis
使用:
```js
console.log(import.meta.env.VITE_API_URL) // 这行代码会在不同的环境变量下打印不同的值
- 另外,vite是支持自定义变量前缀的,我这里就不多赘述了,增加心智负担,详情请看 共享配置 | Vite 官方中文文档 (vitejs.dev)