Vue3+Vite 环境变量和模式配置详解(推荐)

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

VITE_SOME_KEY=123
DB_PASSWORD=foobar

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}

{
  "lib": ["WebWorker"]
}

# .env.production
VITE_APP_TITLE=My App

vite build --mode staging

# .env.staging
NODE_ENV = production
VITE_APP_TITLE = My App (staging)

NODE_ENV = "development"  //开发环境标志
VUE_APP_BASE_API = "/xxx_admin_test"  //API基础路径变量，此时为http://localhost:8080/xxx_admin_test
VUE_APP_DOMAIN = "http://localhost:8080"  //域名
VUE_APP_REDIRECT_URL = ""  //ADFS重定向URL，用于OAuth或单点登录流程中用户认证完成后重定向到这个URL来获得token
VUE_APP_CLIENT_ID = "xxxxxxxxxxxxxxx"  //OAuth客户端ID，用于OAuth授权
BASE_URL = ""  //路由基础路径，一般为空，表示应用的跟路径

NODE_ENV = "production"
VUE_APP_BASE_API = "/xxx_admin"
VUE_APP_DOMAIN = "http://xxx.xxx"
VUE_APP_REDIRECT_URL = "http://xxx.xxx/getToken"
VUE_APP_CLIENT_ID = "xxxxxxxxxxxxxxx"
BASE_URL = ""

NODE_ENV = "test"
VUE_APP_BASE_API = "/xxx_admin_test"
VUE_APP_DOMAIN = "http://xxx.xxxx/xxx_test/"
VUE_APP_REDIRECT_URL = "http://xxx.xxxx/xxx_test/getToken"
VUE_APP_CLIENT_ID = "xxxxxxxxxxxxxxx"
BASE_URL = "/xxx_test"

{
    "name": "xxx",
    "version": "0.1.0",
    "orivate": true,
    "scripts": {
        "serve": "vue-cli-service serve",  //启动项目，使用npm run serve指令自动加载.env和.env.development配置文件，所以不用写 --mode
        "build": "bie-cli-service build",  //生产环境打包，使用npm run build指令时，会自动加载.env和.env.production配置文件
        "lint": "vue-cli-service lint",
        "build:dev": "bie-cli-service build --mode developmemt",  //使用npm run build:dev指令运行时，会加载.env.developmemt配置文件
        "build:test": "bie-cli-service build --mode test",  //测试环境打包
        "build:cloud": "bie-cli-service build --mode cloud",  //云环境打包
    }
}

<template>
    <div>
        <p>API Endpoint: {{ $env.VUE_APP_API_ENDPOINT }}</p>
        <p>Log Level: {{ $env.VUE_APP_LOG_LEVEL }}</p>
    </div>
</template>

import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
const routes = [
    { 
        //静态路由
        path: '/', 
        name: 'Home', 
        component: Home,
        meta: { title: "HOME" },
    }, {
        //动态路由
        path: '/user/:id',
        name: 'User',
        component: User,
        meta: { title: "USER" },
    }, {
        //嵌套路由
        path: '/dashboard',
        component: Dashboard,
        children: [
        {
            path: '',           //路由为`/dashboard`
            component: Overview,
            meta: { title: "DB" },
        }, {
            path: 'profile',    //路由为`/dashboard/profile`
            component: Profile,
            meta: { requiresAuth: true },
        }, {
            path: 'settings',   //路由为`/dashboard/settings`
            component: Settings,
            meta: { requiresAuth: false },
        } ]
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes，
    base: process.env.BASE_URL,
})
export default router;