vue3+ts+vite2环境变量应该这样使用
在做项目环境变量配置前,可以先到官网回忆一下环境变量的基本使用,https://cn.vitejs.dev/guide/e...
一、环境模式
【vue3+ts+vite2环境变量应该这样使用】首先环境变量是可以分模式的,常用模式如下:
.env# 所有情况下都会加载
.env.local# 所有情况下都会加载,但会被 git 忽略
.env.[mode]# 只在指定模式下加载
.env.[mode].local# 只在指定模式下加载,但会被 git 忽略
默认
dev
环境下使用 .env.development
环境变量配置,build
环境下使用 .env.production
,所以不需要在 package.json
中再指定模式了"scripts": {
"dev": "vite --mode development", // --mode development可以省略,运行 npm run dev 自动指定
"build": "vue-tsc --noEmit && vite build --mode production", // --mode production可以省略,运行 npm run build 自动指定
"preview": "vite preview"
},
--mode
一般在其他特殊自定义下指定使用。二、环境变量分类 2.1 默认环境变量
- import.meta.env.MODE: {string} 应用运行的模式
- import.meta.env.BASE_URL: {string} 部署应用时的基本 URL
- import.meta.env.PROD: {boolean} 应用是否运行在生产环境
- import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)
以
VITE_
开头,这样会被vite处理,如下:.env.developlent
VITE_API_URL=/api/
VITE_LOCATION_ORIGIN=http://localhost:3000/
另外自定义的环境变量,还需要在
env.d.ts
中声明变量类型/// interface ImportMetaEnv {
readonly VITE_TITLE: string
readonly VITE_API_URL: string
}interface ImportMeta {
readonly env: ImportMetaEnv
}declare module '*.vue' {
import type { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
三、加载优先级 模式覆盖通用,如:在生产环境下,
.env.production
中的同名环境变量会覆盖 .env
中同名配置,其他同理四、环境变量使用 Vite把环境变量通过
import.meta.env
暴露出来,在 .vue
中使用方式如下:
但如果要在 axios 中使用就需要特别配置了,需要在
vite.config.js
中加载环境变量,我们可以像以下这种方式处理:import { defineConfig, loadEnv } from 'vite'// https://vitejs.dev/config/
export default ({ mode }) => defineConfig({
define: {
'process.env': loadEnv(mode, process.cwd())
},
}
这样配置完成后就可以在 plugins 下 axios.ts 中使用了
const {
VITE_API_URL
} = process.envconst instance = axios.create({
baseURL: VITE_API_URL
});
export default instance
https://fenxianglu.cn/
文章图片
推荐阅读
- 笔记|idea配置全局变量(Jdk,maven仓库,maven)
- java|JDK1.8安装和环境搭建步骤
- HTML中的函数使用基础(函数定义,函数调用,函数参数,函数返回值,嵌套函数,递归函数,变量作用域,内置函数,其他定义函数的方法)
- SpringCloudAlibaba|SpringCloudAlibaba 微服务讲解(二)微服务环境搭建
- python|Pycharm配置虚拟环境及安装库
- 技巧分享|PyTorch Geometric(图卷积)环境安装 —— GPU
- python|pycharm 配置虚拟环境 安装虚拟环境
- python|Win10操作系统(PyTorch虚拟环境配置+PyCharm配置)
- bug|一次由于传递局部变量指针产生的bug
- C++|基于QT实现简单的TCP通信