From 028cc03aeb0e66f69c414dbcea8c381aadf3ff3f Mon Sep 17 00:00:00 2001
From: lianlonggang <lianlonggang@qq.com>
Date: Mon, 13 Oct 2025 14:53:54 +0800
Subject: [PATCH] =?UTF-8?q?docker=E6=9B=BF=E6=8D=A2=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=EF=BC=8C=E5=8F=AA=E5=9C=A8production=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html       |  12 ++--
 src/utils/env.ts |   2 +-
 vite.config.ts   | 153 ++++++++++++++++++++++++-----------------------
 3 files changed, 87 insertions(+), 80 deletions(-)

diff --git a/index.html b/index.html
index 37395f8..65b291f 100644
--- a/index.html
+++ b/index.html
@@ -7,14 +7,18 @@
     <title>应急就医服务中心</title>
     <!-- 全局配置 -->
     <script>
-        // 默认值（可选）
-        window.__APP_ENV__ = {
-            VITE_GLOB_API_URL: '__VITE_GLOB_API_URL__', // 占位符，Docker 替换
-        };
+        // // 默认值（可选）
+        // window.__APP_ENV__ = {
+        //     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 {
diff --git a/src/utils/env.ts b/src/utils/env.ts
index 43fea4d..33d0670 100644
--- a/src/utils/env.ts
+++ b/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;
diff --git a/vite.config.ts b/vite.config.ts
index 5b7b223..3a7767c 100644
--- a/vite.config.ts
+++ b/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了
-    unitPrecision: 5, //允许REM单位增长到的十进制数字，其实就是精度控制
-    // propWhiteList: [], // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
-    // propBlackList: [], // 黑名单
-    // 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
+    rootValue: 17,
+    unitPrecision: 5,
+    mediaQuery: false,
+    minPixelValue: 2,
 };
+
+// 👉 定义插件（更健壮）
+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({
-    plugins: [
-        vue(),
-        resolveExternalsPlugin({
-            AMap: 'AMap',
-        }),
-        vueJsx(),
-    ],
-    css: {
-        preprocessorOptions: {
-            less: {
-                javascriptEnabled: true,
-            },
-        },
-        postcss: {
-            plugins: [postcssPluginPx2rem(px2remOptions)],
-        },
-    },
-    resolve: {
-        alias: [
-            {
-                find: /\/@\//,
-                replacement: pathResolve('src') + '/',
-            },
+export default defineConfig(({ mode }: ConfigEnv) => {
+    return {
+        plugins: [
+            vue(),
+            resolveExternalsPlugin({
+                AMap: 'AMap',
+            }),
+            vueJsx(),
+            injectAppEnvPlugin(), // 使用函数式插件
         ],
-        extensions: ['.js', '.ts', '.mjs', '.vue', '.json', '.less', '.css'],
-    },
-    server: {
-        host: true,
-        https: false,
-    },
-    optimizeDeps: {
-        esbuildOptions: {
-            target: 'esnext',
+        css: {
+            preprocessorOptions: {
+                less: {
+                    javascriptEnabled: true,
+                },
+            },
+            postcss: {
+                plugins: [postcssPluginPx2rem(px2remOptions)],
+            },
         },
-        // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
-        include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
-    },
-    build: {
-        target: 'esnext',
-        sourcemap: false,
-        //     rollupOptions: {
-        //         output: {
-        //             //入口文件输出配置
-        //             entryFileNames: `assets/js/[name]-[hash].js`,
-        //             //代码分割后的文件输出配置
-        //             chunkFileNames: `assets/js/[name]-[hash].js`,
-        //             //静态资源输出配置
-        //             assetFileNames(assetInfo) {
-        //                 //css文件单独输出到css文件夹
-        //                 if (assetInfo.name.endsWith('.css')) {
-        //                     return `assets/css/[name]-[hash].css`;
-        //                 }
-        //                 //图片文件单独输出到img文件夹
-        //                 else if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'].some((ext) => assetInfo.name.endsWith(ext))) {
-        //                     return `assets/img/[name]-[hash].[ext]`;
-        //                 }
-        //                 //其他资源输出到assets文件夹
-        //                 else {
-        //                     return `assets/[name]-[hash].[ext]`;
-        //                 }
-        //             },
-        //         },
-        //     },
-    },
-});
+        resolve: {
+            alias: [
+                {
+                    find: /\/@\//,
+                    replacement: pathResolve('src') + '/',
+                },
+            ],
+            extensions: ['.js', '.ts', '.mjs', '.vue', '.json', '.less', '.css'],
+        },
+        server: {
+            host: true,
+            https: false,
+        },
+        optimizeDeps: {
+            esbuildOptions: {
+                target: 'esnext',
+            },
+            include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
+        },
+        build: {
+            target: 'esnext',
+            sourcemap: false,
+        },
+    };
+});
\ No newline at end of file