vue3+vite项⽬搭建-配置环境变量env
vite3+vite项目搭建配置多环境变量 .env.development和.env.dev 等多文件配置
·
vue3+vite项⽬搭建-配置环境变量env
vue3+vite项⽬搭建-配置环境变量env:
1. 根目录下新建文件
写法1:其中写环境变量和其它变量,必须要以VITE_开头 如下图:
图1:开发环境
图2:生成环境
写法2:若环境变量和其它变量不想以VITE_开头 如:以 APP_ 开头
则可以在 vite.config.ts 文件中添加 envPrefix: “APP_”,
2、配置tsconfig.json文件
在tsconfig.json中添加 “types”: [ “vite/client” ] ,用来提供import.meta.env 上 Vite 注入的环境变量的类型定义
3、配置env.d.ts文件
在src目录下env.d.ts中添加以下代码,可以在在代码中获取用户自定义环境变量的 TypeScript 智能提示
interface ImportMetaEnv {
readonly APP_BASE_API: string;
// 更多环境变量...
}
4、使用环境变量
使用import.meta.env.APP_BASE_API获取环境变量
console.log(import.meta.env.APP_BASE_API)
// 可以打印import.meta.env 查看里面的具体数据
console.log(import.meta.env)
5、在package.json中配置模式
"scripts": {
"serve": "vite", // 未指定模式的默认取 .env.development 文件中的配置
"dev": "vite --mode dev", // 取 .env.dev文件中的配置
"stg": "vite --mode stg", // 取 .env.stg文件中的配置
"pro": "vite --mode pro", // 取 .env.pro文件中的配置
"build": "vue-tsc --noEmit && vite build", // 未指定模式的默认取 .env.development 文件中的配置
"build:dev": "vue-tsc --noEmit && vite build --mode dev", // build的时候取dev的配置
"build:stg": "vue-tsc --noEmit && vite build --mode stg", // build的时候取stg的配置
"build:pro": "vue-tsc --noEmit && vite build --mode pro", // build的时候取pro的配置
"preview": "vite preview"
},
如下图:
6、扩展
在使用axios请求后台接口时可配置基本路径为配置路径。
baseURL: import.meta.env.APP_BASE_API,
更多推荐
已为社区贡献1条内容
所有评论(0)