vite ts 项目环境变量 正确姿势

1、vite.config.js

envDir : 指定.env文件存放位置 以根目录为基础

例如：envDir: 'env', 表示根目录下 env目录存放.env文件

image.png

2、创建.env文件

.env 什么环境都会加载
.env.development 开发环境
.env.production 线上环境

tips：
windows开发

一定要打开文件后缀，以防.env文件有后缀 导致访问不到

3、.env文件内容

环境变量以 VITE_ 开头 后面随意 ，但是得大写哈
如：VITE_URL="http://deme.com/#/index?id="

TIPS
环境变量的赋值

双引号：VITE_URL=”http://deme.com/#/index?id=“
单引号：VITE_URL=‘http://deme.com/#/index?id=’
不使用引号：VITE_URL=http://deme.com/#/index?id=

最好是统一使用 ”双引号“ ，为什么呢？

因为，单引号、不使用引号赋值 遇到 # 等操作符 会导致赋值失败
结果就是，获取时:VITE_URL="http://deme.com/“

4、package.json

图中 执行命令 --mode 指定是要运行什么环境 要与.env文件的命名保持一致

tips

"dev": "vite" 等价于 "dev": "vite --mode development",
"build": "vite build" 等价于 "build": "vite build --mode production"

5、.env 文件的命名 是固定的吗？ NO NO NO

.env.development .env.production
这俩其实是默认文件名称

咱们可以自定义名称

image.png

咱们.env文件则命名为.env.test 即可

6、访问

const baseUrl = import.meta.env.VITE_URL;

结果打印：undefined 这这这，这如何是好。。。。。。

7、ts申明配置 vite-env.d.ts

vite-env.d.ts：官方默认文件命名、位置默认在src目录下 或 根目录下

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

当然，可以自定义名称与位置，比如命名为env.d.ts，还存放在下types目录下，怎么设置呢？

image.png

在 tsconfig.json 增加include配置即可

{
  "compilerOptions": {
    // ...你的其他配置
  },
  "include": [
   "types/*.d.ts",
    "src"
  ]
}