vue3.x+ts+vite2 environment variable configuration

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 忽略

Default dev under environments .env.development environment variable configuration, build under environments .env.production , it is unnecessary package.json mode in China

 "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 for use 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 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 .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

For more front-end knowledge, please pay attention to the applet, there will be surprises from time to time!