生产环境配置

1.不同的生产环境部署

解决不同生产环境的上线地址问题

1.根文件html文件
<script src="%VITE_APP_BASE%config.js"></script>

2.所有的这个.env环境变量文件增加属性
VITE_APP_BASE = "/data-registry/"

3.viteconfig文件
import { defineConfig, loadEnv } from 'vite';
import { fileURLToPath, URL } from 'node:url';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueDevTools from 'vite-plugin-vue-devtools';
export default ({ mode }: any) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd());
  let baseVal = env.VITE_APP_BASE;
  if (baseVal === '') {
    baseVal = '/';
  }
  return defineConfig({
    base: baseVal,
    plugins: [vue(), VueDevTools()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    css: {
      preprocessorOptions: {
        less: {
          additionalData:
            '@import "@/assets/styles/common.less";@import "@/assets/styles/new-variables.less";'
        }
      }
    },
    build: {
      outDir: 'dist', // 这里配置打包输出的文件夹
      sourcemap: true
    }
  });
};
4.package.json 文件
 	"build": "vite build",
    "build-kaifa": "run-p  \"build-only --mode kaifa {@}\" --",
    "build-yanshi": "run-p  \"build-only --mode yanshi {@}\" --",
    "build-zhongdian": "run-p  \"build-only --mode zhongdian {@}\" --",

2.前端项目生产环境变量

解决不同生产环境的差异性配置，例如在哪个环境需要做哪些事情

1.在public文件夹下面，新建一个config.js文件

window.AppConfig = {
  ServerAddr: 'http://27.115.98.190:31060',
  Header: 'http://',
  Path: '',
  CurrentEnv: 'dalian' //是否是大连环境 如果是就写 dalian 区别不同生成环境 yanshi 就是稳定环境 kaifa就是开发环境
};

2.配置该文件的变量类型，新建一个env.d.ts
declare global {
  interface Window {
    AppConfig: {
      ServerAddr: string;
      Header: string;
      Path: string;
      CurrentEnv:string;
    };
  }
  interface ImportMetaEnv {
    VITE_APP_VERSION: string;
    VITE_API_BASE_URL: string;
  }
}

3.项目中通过window.AppConfig.CurrentEnv进行访问
4.生产环境中，需要后端同时挂载配置该文件，否则不生效

3.前端项目生产环境变量

解决不同生产环境的照片显示，下载文件，内外网问题

1.新建一个文件，例如config.ts
// 获取服务器地址配置
function getServerUrl(): string {
  const config = window.AppConfig;
  const addr = window.location.host;

  // 检查是否在生产环境且配置了 ServerAddr
  if (import.meta.env.MODE === 'production' && config.ServerAddr !== '') {
    return config.ServerAddr;
  }

  // 开发环境或生产环境未配置 ServerAddr 时使用 VITE_API_BASE_URL
  const defaultBaseUrl = import.meta.env.VITE_API_BASE_URL;
  if (defaultBaseUrl) {
    return defaultBaseUrl;
  }

  // 如果以上都不适用，尝试使用 AppConfig 中的 Header, Path 和当前域名拼接（注意：这通常不是标准做法）
  // 警告：这种拼接方式可能不正确，通常 URL 应该包括协议（如 http:// 或 https://）
  // 这里假设 Header 是协议部分，如果不是，请根据实际情况调整
  return `${config.Header || 'http://'}${addr}${config.Path || ''}`;
}

export default { getServerUrl };