vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue多环境

深入详解Vue3实现多环境配置与切换方式

作者：VipSoft

这篇文章主要为大家详细介绍了Vue3中实现多环境配置与切换方式的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

创建文件

创建 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: '开发',
  apiUrl: 'http://localhost:9091'
}

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

window.settings.pre = {
  environment: '预发布',
  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 = {
  // 系统Title
  title: `后台管理 (${envSettings.environment})`,
  // 环境
  environment: envSettings.environment,
  apiUrl: envSettings.apiUrl,
  tocApiUrl: envSettings.tocApiUrl,
}

export default defaultSettings;

request.ts

import defaultSettings from "@/settings";

// 创建 axios 实例
const service = axios.create({
  //baseURL: import.meta.env.VITE_APP_BASE_API, 在 vite.config.js 中做代理
  baseURL: defaultSettings.apiUrl, //这边也可以设置特殊的值，在 vite.config.js 中做代理
  timeout: 50000,
  headers: { "Content-Type": "application/json;charset=utf-8" },
  paramsSerializer: (params) => qs.stringify(params),
});

应用

login.vue

<!-- 登录页内容 -->
<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 修改原有的多环境切换方式

一般可以使用 Jenkins 对配置 .env.development、.env.production，不同的环境进行构建

在没有 CI/CD 的情况下。Vue 项目的打包变得繁琐。

目前项目，使用一次打包，通过不同的 app-settings.ts 对项目环境进行切换。发版时，不同的环境只需保留 app-settings.ts 对其它文件进行替换即可

添加配置

app-settings.ts文件内容如下

// 1. 首先定义统一的配置接口
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. 使用环境变量或构建时变量来决定使用哪个配置
type EnvironmentKey = keyof typeof ENVIRONMENT_SETTINGS;

// 可以通过环境变量、构建参数等方式动态选择环境
const getCurrentEnvironment = (): EnvironmentKey => {
  // 默认返回测试环境
  return Environment.PRE;
};

// 4. 导出选中的配置
const currentEnv = getCurrentEnvironment();
export default ENVIRONMENT_SETTINGS[currentEnv];

引用

global.d.ts

  /**
   * 系统设置
   */
  interface AppSettings {
    /** 系统标题 */
    title: string;  
    /** 系统环境 */
    environment: string;
    apiUrl: string;
    tocApiUrl: string;
  }

settings.ts

import envSettings from "./app-settings";

const defaultSettings: AppSettings = {
  // 系统Title
  title: `后台管理 (${envSettings.environment})`,
  // 环境
  environment: envSettings.environment,
  apiUrl: envSettings.apiUrl,
  tocApiUrl: envSettings.tocApiUrl,
}

export default defaultSettings;

import defaultSettings from "@/settings";

// 创建 axios 实例
const service = axios.create({
  //baseURL: import.meta.env.VITE_APP_BASE_API, 在 vite.config.js 中做代理
  baseURL: defaultSettings.apiUrl, //这边也可以设置特殊的值，在 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

到此这篇关于深入详解Vue3实现多环境配置与切换方式的文章就介绍到这了,更多相关Vue多环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文