vue.config.ts配置环境变量

简介: vue.config.ts配置环境变量

在做项目环境变量配置前,可以先到官网回忆一下环境变量的基本使用, 环境变量和模式 | Vite 官方中文文档


一、环境模式


首先环境变量是可以分模式的,常用模式如下:  

.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

五、vue.config.ts 配置


一、进入项目根目录下的package.json文件,增加多个环境模式。

  "scripts": {
    "dev": "vite serve --mode development",
    "test": "vite serve --mode test",
    "ppe": "vite serve --mode ppe",
    "prod": "vite serve --mode production",
    "build:dev": "vue-tsc --noEmit && vite build --mode development",
    "build:test": "vue-tsc --noEmit && vite build --mode test",
    "build:ppe": "vue-tsc --noEmit && vite build --mode ppe",
    "build:prod": "vue-tsc --noEmit && vite build --mode production",
    "serve": "vite preview"
  }

二、在项目根目录下增加环境变量的文件。  


如:开发环境dev,创建.env.development文件

# 开发环境变量
VITE_APP_TITLE='development'
VITE_API_URL = 'http://000.000.000.00:0000/'

三、执行npm run dev,配置的开发环境变量便生效。  


四、vue文件中访问import.mate.env  

console.log('VITE_APP_TITLE:' + import.meta.env.VITE_APP_TITLE);
相关文章
|
29天前
|
Java 数据库连接 开发工具
web后端-SpringCloud-Config分布配置
web后端-SpringCloud-Config分布配置
|
29天前
|
API
在vite.config.js 配置代理
在vite.config.js 配置代理
135 2
|
29天前
|
自然语言处理 JavaScript
vue element plus Config Provider 全局配置
vue element plus Config Provider 全局配置
47 0
|
5天前
|
存储 消息中间件 Java
Java一分钟之-Spring Cloud Config:外部化配置
【6月更文挑战第8天】Spring Cloud Config提供外部化配置,通过Config Server管理和版本控制微服务配置。本文涵盖Config Server与Client的配置、常见错误、多环境配置、实时更新及使用示例。注意配置服务器URL、环境变量设置、Bus配置以及安全问题。使用Config能提升系统灵活性和可维护性,但要留意日志以确保配置正确和安全。
85 10
|
6天前
|
Web App开发 JavaScript
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
14 0
|
27天前
|
移动开发 前端开发 JavaScript
Vue2 系列:vue.config.js 参数配置
Vue2 系列:vue.config.js 参数配置
27 2
|
29天前
|
前端开发 API
nuxt.config.js 配置
我们在使用Nuxt.js提供的create-nuxt-app 创建项目后,更希望对它自定义一些东西,这里我们可以在根目录下找到nuxt.config.js
29 7
|
29天前
|
开发框架 JSON .NET
.Net4.0 Web.config 配置实践
.Net4.0 Web.config 配置实践
|
29天前
|
JSON JavaScript 前端开发
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
46 1
|
29天前
|
移动开发 监控 小程序
mPaaS常见问题之uniapp ios端云打包的配置config文件如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战