vue-cli3配置(vue3.xtsvite2环境变量配置)
在做项目环境变量配置前,可以先到官网回忆一下环境变量的基本使用,https://cn.vitejs.dev/guide/env-and-mode.html
一、环境模式首先环境变量是可以分模式的,常用模式如下:
.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
更多前端知识,请关注小程序,不定期有惊喜!
,
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com