定制化开发在做项目前,定制化开发可以先到官网回忆一下定制化开发环境变量的基本使用,https://cn.vitejs.dev/guide/env-and-mode.html
一、环境模式
定制化开发首先环境变量是可以分模式的,常用模式如下:
.env # 所有情况下都会加载.env.local # 所有情况下都会加载,但会被 git 忽略.env.[mode] # 只在指定模式下加载.env.[mode].local # 只在指定模式下加载,但会被 git 忽略
- 1
- 2
- 3
- 4
默认 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"},
- 1
- 2
- 3
- 4
- 5
--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相反)
2.2 应用级环境变量
以 VITE_
开头,这样会被vite处理,如下:
.env.developlent
VITE_API_URL=/api/VITE_LOCATION_ORIGIN=http://localhost:3000/
- 1
- 2
另外自定义的环境变量,还需要在 env.d.ts
中声明变量类型
/// <reference types="vite/client" />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}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
三、加载优先级
模式覆盖通用,如:在生产环境下,.env.production
中的同名环境变量会覆盖 .env
中同名配置,其他同理
四、环境变量使用
Vite把环境变量通过 import.meta.env
暴露出来,在 .vue
中使用方式如下:
<script setup lang="ts"> console.log(import.meta.env)</script>
- 1
- 2
- 3
但如果要在 axios 中使用就需要特别配置了,需要在 vite.config.js
中加载环境变量,我们可以像以下这种方式处理:
import { defineConfig, loadEnv } from 'vite'// https://vitejs.dev/config/export default ({ mode }) => defineConfig({ define: { 'process.env': loadEnv(mode, process.cwd()) },}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
这样配置完成后就可以在 plugins 下 axios.ts 中使用了
const { VITE_API_URL} = process.envconst instance = axios.create({ baseURL: VITE_API_URL});export default instance
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
更多前端知识,请关注小程序,不定期有惊喜!