需求
vite.config.ts
获取配置文件下面的数据.vue,.ts,.tsx
src文件夹下面获取配置文件下面的数据
一、src/* .vue,.ts,.tsx
文件夹下面使用环境变量
之前webpack
或者用的vue-cli
我们在获取配置文件数据的时候通过process.env
,但是在vite
里面不能通过这种方式
vite需要通过import.meta.env.xxx
,官方文档有说明,下面是vite内置的几个
但是实际的开发当中,我们还需要增加一些自定义的字段,如VITE_BASE_URL
请求的url
这个时候我们可以在根目录下面新建一个.env.xxx
文件,写入下面内容
VITE_BASE_URL = http://www.xxx.com
然后在我们的axios
配置里面使用
这样是我完全没有问题的,假设我们是使用ts
来开发的项目,我们就会发现,我们自定的字段ts并没有给我们有好的提示
虽然也可以用,但是我都用ts
,你凭什么不给我提示?
其实关于配置文件里面自定义的字段,要想有提示官方给了一个明确的说明
所以我们可以新增一个env.d.ts
文件,然后把我们自定义的字段配置进接口即可,至于这个文件你想都放到哪个位置,具体还是要看tsconfig.json
里面includes
字段的配置
这个时候我们在使用的时候,就可以让vscode给我们有好的提示
二、vite.config.ts配置文件里面使用
官方文档有明确的说明,也就是说我们要想在vite.config.ts
中去使用.env
文件中的字段,我们需要使用loadEnv
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
// 根据当前工作目录中的 `mode` 加载 .env 文件
// 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。
const env = loadEnv(mode, process.cwd(), '')
return {
server: {
host: '0.0.0.0',
port: 2233,
proxy: {
'/api/': {
target: env.VITE_PROXY_URL,
ws: false,
changeOrigin: true,
rewrite: path => path.replace('/api', ''),
},
},
},
}
})
三、如何优雅的处理多个.env文件
如果我们的项目上线的环境比较多,或者再开发对接的时候要配置不同的环境,如
.env.dev
.env.test
.env.prod
.env.zhangsan
.env.lisi
.env.xxx
本身我们现在工程化开发的规范下,我们的根目录就会有了一堆的配置文件
这个时候我们再加一堆的.env
文件配置就会显得混乱
,所以有没有一种方案就是我们所有的.env
文件放到一个叫env
的文件夹下面呢?
在vite配置里面,有一个属性叫envDir
也就是说我们可以配置这个字段,让vite能够识别我们在env
文件夹下面配置的文件,具体配置如下:
配置的时候注意一点,就是loadEnv
的第二个参数,读取的路径要跟envDir
路径一致
比如说我们在env
文件夹下面新建了一个.env.test
文件,并定义了一个VITE_PROXY_URL
字段,用于跟不同的服务对接的时候处理跨域
问题去做代理
然后我们还想在启动项目的时候通过命令去做一个区分,我们可以在package.json
文件下的scripts
里面新增
"dev:test": "vite --mode test"
这个时候我们在vite.config.ts
中打印看一下
我们可以看到右侧终端
中输出了test { VITE_PROXY_URL: 'http://xxx' }
这个时候我们在.env.test
里面在新增一个字段VITE_APP_TITLE
,可以看到
关于loadEnv
参数
- 第一个参数
mode
vite --mode test
默认是development
,如果是运行打包命令的话默认就是production
- 第二个参数
.env
配置文件所在的路径,这个要根据envDir
来,默认是根路径 - 第三个参数 就是过滤以
xxx
开头的字段,默认是VITE_
,如果是''
空字符,就是获取全部