深入詳解Vue3實現(xiàn)多環(huán)境配置與切換方式

更新時間：2025年09月18日 10:14:41 作者：VipSoft

這篇文章主要為大家詳細(xì)介紹了Vue3中實現(xiàn)多環(huán)境配置與切換方式的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

創(chuàng)建文件

創(chuàng)建 public/app-settings.js 文件，注意js不能ts否則瀏覽器無法方法

// 確保 window.settings 對象存在
if (!window.settings) {
  window.settings = {};
}

window.environment="dev"
window.version = 'v1.0.1'

window.settings.dev = {
  environment: '開發(fā)',
  apiUrl: 'http://localhost:9091'
}

window.settings.test = {
  environment: '測試',
  apiUrl: 'http://192.168.0.100:9091'
}

window.settings.pre = {
  environment: '預(yù)發(fā)布',
  apiUrl: 'http://192.168.0.101:9091'
}

window.settings.pro = {
  environment: '正式',
  apiUrl: 'http://192.168.0.102:9091'
}

添加引用

index.html 中添加引用 <script src="/app-settings.js"></script>

注意：要添加在 <body> 里面否則 build 的時候會被干掉

<body>
  <script src="/app-settings.ts"></script>
  <div id="app">
    <div class="loader"></div>
  </div>
</body>
<script type="module" src="/src/main.ts"></script>

配置

settings.ts

const envSettings: any = window.settings[window.environment] || window.settings.dev;

const defaultSettings: AppSettings = {
  // 系統(tǒng)Title
  title: `后臺管理 (${envSettings.environment})`,
  // 環(huán)境
  environment: envSettings.environment,
  apiUrl: envSettings.apiUrl,
  tocApiUrl: envSettings.tocApiUrl,
}

export default defaultSettings;

request.ts

import defaultSettings from "@/settings";

// 創(chuàng)建 axios 實例
const service = axios.create({
  //baseURL: import.meta.env.VITE_APP_BASE_API, 在 vite.config.js 中做代理
  baseURL: defaultSettings.apiUrl, //這邊也可以設(shè)置特殊的值，在 vite.config.js 中做代理
  timeout: 50000,
  headers: { "Content-Type": "application/json;charset=utf-8" },
  paramsSerializer: (params) => qs.stringify(params),
});

應(yīng)用

<!-- 登錄頁內(nèi)容 -->
<div class="login-form">
  <el-form ref="loginFormRef" :model="loginFormData" :rules="loginRules">
    <div class="form-title">
      <h2>{{ defaultSettings.title }}</h2>
    </div>

    <!-- 用戶名 -->
    <el-form-item prop="username">
      <div class="input-wrapper">
        <el-icon class="mx-2">
          <User />
        </el-icon>
        <el-input
          ref="username"
          v-model="loginFormData.username"
          :placeholder="$t('login.username')"
          name="username"
          size="large"
          class="h-[48px]"
        />
      </div>
    </el-form-item>
  
    <!-- 密碼 -->
    <el-tooltip :visible="isCapslock" :content="$t('login.capsLock')" placement="right">
      <el-form-item prop="password">
        <div class="input-wrapper">
          <el-icon class="mx-2">
            <Lock />
          </el-icon>
          <el-input
            v-model="loginFormData.password"
            :placeholder="$t('login.password')"
            type="password"
            name="password"
            size="large"
            class="h-[48px] pr-2"
            show-password
            @keyup="checkCapslock"
            @keyup.enter="handleLoginSubmit"
          />
        </div>
      </el-form-item>
    </el-tooltip>
</div>

Vue3 修改原有的多環(huán)境切換方式

一般可以使用 Jenkins 對配置 .env.development、.env.production，不同的環(huán)境進(jìn)行構(gòu)建

在沒有 CI/CD 的情況下。Vue 項目的打包變得繁瑣。

目前項目，使用一次打包，通過不同的 app-settings.ts 對項目環(huán)境進(jìn)行切換。發(fā)版時，不同的環(huán)境只需保留 app-settings.ts 對其它文件進(jìn)行替換即可

添加配置

app-settings.ts文件內(nèi)容如下

// 1. 首先定義統(tǒng)一的配置接口
export interface EnvironmentSettings {
  environment: string;
  apiUrl: string;
  tocApiUrl: string;
}

export enum Environment {
  DEV = "dev",
  TEST = "test",
  PRE = "pre",
  PRO = "pro",
}

// 2. 使用常量對象而不是多個變量
const ENVIRONMENT_SETTINGS: Record<string, EnvironmentSettings> = {
  dev: {
    environment: "開",
    apiUrl: "https://xxxxx",
    tocApiUrl: "https://xxxxx",
  },
  test: {
    environment: "測",
    apiUrl: "https://xxxxx",
    tocApiUrl: "https://xxxxx",
  },
  pro: {
    environment: "",
    apiUrl: "https://xxxxx",
    tocApiUrl: "https://xxxxx",
  },
} as const;

// 3. 使用環(huán)境變量或構(gòu)建時變量來決定使用哪個配置
type EnvironmentKey = keyof typeof ENVIRONMENT_SETTINGS;

// 可以通過環(huán)境變量、構(gòu)建參數(shù)等方式動態(tài)選擇環(huán)境
const getCurrentEnvironment = (): EnvironmentKey => {
  // 默認(rèn)返回測試環(huán)境
  return Environment.PRE;
};

// 4. 導(dǎo)出選中的配置
const currentEnv = getCurrentEnvironment();
export default ENVIRONMENT_SETTINGS[currentEnv];

引用

global.d.ts

  /**
   * 系統(tǒng)設(shè)置
   */
  interface AppSettings {
    /** 系統(tǒng)標(biāo)題 */
    title: string;  
    /** 系統(tǒng)環(huán)境 */
    environment: string;
    apiUrl: string;
    tocApiUrl: string;
  }

settings.ts

import envSettings from "./app-settings";

const defaultSettings: AppSettings = {
  // 系統(tǒng)Title
  title: `后臺管理 (${envSettings.environment})`,
  // 環(huán)境
  environment: envSettings.environment,
  apiUrl: envSettings.apiUrl,
  tocApiUrl: envSettings.tocApiUrl,
}

export default defaultSettings;

import defaultSettings from "@/settings";

// 創(chuàng)建 axios 實例
const service = axios.create({
  //baseURL: import.meta.env.VITE_APP_BASE_API, 在 vite.config.js 中做代理
  baseURL: defaultSettings.apiUrl, //這邊也可以設(shè)置特殊的值，在 vite.config.js 中做代理
  timeout: 50000,
  headers: { "Content-Type": "application/json;charset=utf-8" },
  paramsSerializer: (params) => qs.stringify(params),
});

baseURL: import.meta.env.VITE_APP_BASE_API 改為 baseURL: defaultSettings.apiUrl

到此這篇關(guān)于深入詳解Vue3實現(xiàn)多環(huán)境配置與切換方式的文章就介紹到這了,更多相關(guān)Vue多環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: