docker替换变量，只在production环境进行处理

index.html

@@ -7,14 +7,18 @@
     <title>应急就医服务中心</title>
     <!-- 全局配置 -->
     <script>
-        // 默认值（可选）
+        // // 默认值（可选）
-        window.__APP_ENV__ = {
+        // window.__APP_ENV__ = {
-            VITE_GLOB_API_URL: '__VITE_GLOB_API_URL__', // 占位符，Docker 替换
+        //     VITE_GLOB_API_URL: '__VITE_GLOB_API_URL__', // 占位符，Docker 替换
-        };
+        // };
         window._AMapSecurityConfig = {
             securityJsCode: "1b3b86585c863d22db1e7f7636a9e495",
         }
     </script>
+    <!-- __APP_ENV__ 由 Vite 在构建时注入 -->
+    <!-- 开发环境：不注入或注入空值 -->
+    <!-- 生产环境：注入真实值（或占位符供 Docker 替换） -->
+    <!-- __INJECT_APP_ENV__ -->
 </head>
 <style>
     html, body, #app {

src/utils/env.ts

@@ -12,7 +12,7 @@
 
 export function getAppEnvConfig() {
     // 1. 优先：运行时注入（Docker）
-    const runtimeEnv = (window as any).__APP_ENV__;
+    const runtimeEnv = (window as any).__APP_ENV__ || {};
 
     // 2. 其次：构建时环境变量（.env 文件）
     const buildEnv = import.meta.env;

vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite';
+import { defineConfig, ConfigEnv, Plugin } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import vueJsx from '@vitejs/plugin-vue-jsx';
@@ -11,81 +11,84 @@ function pathResolve(dir: string) {
 
 const px2remOptions = {
     remUnit: 14,
-    rootValue: 17, //换算基数， 默认100 ,也就是1440px ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
+    rootValue: 17,
-    unitPrecision: 5, //允许REM单位增长到的十进制数字，其实就是精度控制
+    unitPrecision: 5,
-    // propWhiteList: [], // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
+    mediaQuery: false,
-    // propBlackList: [], // 黑名单
+    minPixelValue: 2,
-    // exclude:false,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
-    // selectorBlackList: [], //要忽略并保留为px的选择器
-    // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
-    // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
-    mediaQuery: false, //（布尔值）允许在媒体查询中转换px
-    minPixelValue: 2, //设置要替换的最小像素值(3px会被转rem)。 默认 0
 };
+
+// 👉 定义插件（更健壮）
+const injectAppEnvPlugin = (): Plugin => {
+    let isProduction = false;
+
+    return {
+        name: 'inject-app-env',
+        config(config, { mode }) {
+            isProduction = mode === 'production';
+        },
+        transformIndexHtml: (html) => {
+            // 确保 html 是字符串
+            if (typeof html !== 'string') {
+                console.warn('transformIndexHtml received non-string HTML');
+                return html;
+            }
+
+            if (!isProduction) {
+                return html; // 开发环境不注入
+            }
+
+            // 使用单行 script，避免换行问题
+            const script = `<script>window.__APP_ENV__ = { VITE_GLOB_API_URL: '__VITE_GLOB_API_URL__' };</script>`;
+
+            // 插入到 </head> 前
+            return html.replace('</head>', `${script}</head>`);
+        },
+    };
+};
+
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }: ConfigEnv) => {
-    plugins: [
+    return {
-        vue(),
+        plugins: [
-        resolveExternalsPlugin({
+            vue(),
-            AMap: 'AMap',
+            resolveExternalsPlugin({
-        }),
+                AMap: 'AMap',
-        vueJsx(),
+            }),
-    ],
+            vueJsx(),
-    css: {
+            injectAppEnvPlugin(), // 使用函数式插件
-        preprocessorOptions: {
-            less: {
-                javascriptEnabled: true,
-            },
-        },
-        postcss: {
-            plugins: [postcssPluginPx2rem(px2remOptions)],
-        },
-    },
-    resolve: {
-        alias: [
-            {
-                find: /\/@\//,
-                replacement: pathResolve('src') + '/',
-            },
         ],
-        extensions: ['.js', '.ts', '.mjs', '.vue', '.json', '.less', '.css'],
+        css: {
-    },
+            preprocessorOptions: {
-    server: {
+                less: {
-        host: true,
+                    javascriptEnabled: true,
-        https: false,
+                },
-    },
+            },
-    optimizeDeps: {
+            postcss: {
-        esbuildOptions: {
+                plugins: [postcssPluginPx2rem(px2remOptions)],
-            target: 'esnext',
+            },
         },
-        // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
+        resolve: {
-        include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
+            alias: [
-    },
+                {
-    build: {
+                    find: /\/@\//,
-        target: 'esnext',
+                    replacement: pathResolve('src') + '/',
-        sourcemap: false,
+                },
-        //     rollupOptions: {
+            ],
-        //         output: {
+            extensions: ['.js', '.ts', '.mjs', '.vue', '.json', '.less', '.css'],
-        //             //入口文件输出配置
+        },
-        //             entryFileNames: `assets/js/[name]-[hash].js`,
+        server: {
-        //             //代码分割后的文件输出配置
+            host: true,
-        //             chunkFileNames: `assets/js/[name]-[hash].js`,
+            https: false,
-        //             //静态资源输出配置
+        },
-        //             assetFileNames(assetInfo) {
+        optimizeDeps: {
-        //                 //css文件单独输出到css文件夹
+            esbuildOptions: {
-        //                 if (assetInfo.name.endsWith('.css')) {
+                target: 'esnext',
-        //                     return `assets/css/[name]-[hash].css`;
+            },
-        //                 }
+            include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
-        //                 //图片文件单独输出到img文件夹
+        },
-        //                 else if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'].some((ext) => assetInfo.name.endsWith(ext))) {
+        build: {
-        //                     return `assets/img/[name]-[hash].[ext]`;
+            target: 'esnext',
-        //                 }
+            sourcemap: false,
-        //                 //其他资源输出到assets文件夹
+        },
-        //                 else {
+    };
-        //                     return `assets/[name]-[hash].[ext]`;
+});
-        //                 }
-        //             },
-        //         },
-        //     },
-    },
-});