vue3+ts+vite2 environment variables should be used like this

Before configuring the project environment variables, you can go to the official website to recall the basic use of environment variables, https://cn.vitejs.dev/guide/env-and-mode.html

1. Environment mode

First of all, environment variables can be divided into modes. The common modes are as follows:

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

By default, the dev environment variable configuration is used in the .env.development environment, and build is used in the .env.production environment, so there is no need to specify the mode in 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 is generally specified and used under other special customizations.

Second, the classification of environmental variables

2.1 Default environment variables

• import.meta.env.MODE: {string} The mode in which the application runs
• import.meta.env.BASE_URL: {string} Base URL when deploying the application
• import.meta.env.PROD: {boolean} whether the application is running in production
• import.meta.env.DEV: {boolean} whether the application is running in development (always the opposite of import.meta.env.PROD)

2.2 Application-level environment variables

Start with VITE_ , which will be processed by vite, as follows:

.env.developlent

VITE_API_URL=/api/
VITE_LOCATION_ORIGIN=http://localhost:3000/

In addition, for custom environment variables, you also need to declare the variable type in 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
}

3. Load priority

The mode coverage is common. For example, in the production environment, the environment variable with the same name in .env.production will overwrite the configuration with the same name in 0623bd7b877671, and the same is .env for others

Fourth, the use of environment variables

Vite exposes environment variables through import.meta.env and uses them in .vue as follows:

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

But if you want to use it in axios, you need special configuration. You need to load environment variables in vite.config.js . We can handle it in the following way:

import { defineConfig, loadEnv } from 'vite'

// https://vitejs.dev/config/
export default ({ mode }) => defineConfig({
  define: {
    'process.env': loadEnv(mode, process.cwd())
  },
}

After the configuration is completed, it can be used in axios.ts under plugins

const {
  VITE_API_URL
} = process.env

const instance = axios.create({
  baseURL: VITE_API_URL
});

export default instance

https://fenxianglu.cn/