Vue3 多环境切换方式

Vue3 修改原有的多环境切换方式: https://www.cnblogs.com/vipsoft/p/19059258
Vue 多环境配置: https://www.cnblogs.com/vipsoft/p/16696640.html

创建文件

创建 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>

image

posted @ 2025-09-15 09:52  VipSoft  阅读(18)  评论(0)    收藏  举报