来源 | https://www.fly63.com/

一、环境模式

.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相反)


2.2 应用级环境变量
以 VITE_ 开头，这样会被vite处理，如下：
.env.developlent
VITE_api_URL=/api/VITE_LOCATION_ORIGIN=http://localhost:3000/

另外自定义的环境变量，还需要在 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}

三、加载优先级
模式覆盖通用，如：在生产环境下， .env.production 中的同名环境变量会覆盖 .env 中同名配置，其他同理
四、环境变量使用
Vite把环境变量通过 import.meta.env 暴露出来，在 .vue 中使用方式如下：





<script setup lang="ts">  console.log(import.meta.env)</script>

但如果要在 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.env
const instance = axios.create({  baseURL: VITE_API_URL});
export default instance



学习更多技能

请点击下方公众号





                                  

                                           web前端开发                                      

一个专业而懂你的前端开发技术研究学习平台，每天与你分享【web前端开发】相关的技术文章与案例，互联网资讯，编程图书与课程，前端开发工具等学习资源，坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
             122篇原创内容                        

                


公众号