LiuYuYang01 · ersanzi · May 14, 2025
diff --git a/dockerfile b/dockerfile
@@ -24,9 +24,13 @@ FROM nginx:alpine
 
 # 复制构建输出到 Nginx 的默认静态文件目录
 COPY --from=builder /thrive/dist /usr/share/nginx/html
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
 
 # 暴露端口
 EXPOSE 80
 
+ENTRYPOINT ["/entrypoint.sh"]
+
 # 启动 Nginx
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/entrypoint.sh b/entrypoint.sh
@@ -0,0 +1,14 @@
+#!/bin/sh
+
+# 创建包含环境变量的配置文件
+echo "window.ENV = {" > /usr/share/nginx/html/config.js
+echo "  VITE_VERSION: '${VITE_VERSION}'," >> /usr/share/nginx/html/config.js
+echo "  VITE_PROJECT_API: '${VITE_PROJECT_API}'," >> /usr/share/nginx/html/config.js
+echo "  VITE_BAIDU_TONGJI_SITE_ID: '${VITE_BAIDU_TONGJI_SITE_ID}'," >> /usr/share/nginx/html/config.js
+echo "  VITE_BAIDU_TONGJI_ACCESS_TOKEN: '${VITE_BAIDU_TONGJI_ACCESS_TOKEN}'," >> /usr/share/nginx/html/config.js
+echo "  VITE_AI_APIPASSWORD: '${VITE_AI_APIPASSWORD}'," >> /usr/share/nginx/html/config.js
+echo "  VITE_AI_MODEL: '${VITE_AI_MODEL}'," >> /usr/share/nginx/html/config.js
+echo "  VITE_GAODE_WEB_API: '${VITE_GAODE_WEB_API}'" >> /usr/share/nginx/html/config.js
+echo "};" >> /usr/share/nginx/html/config.js
+
+exec "$@"
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <script src="/config.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ThriveX 现代化博客管理系统</title>
   </head>

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -11,6 +11,7 @@ import { getRoleRouteListAPI } from '@/api/Role'
 import { Route } from '@/types/app/route';
 import logo from '@/images/logo/logo.png'
 import useVersionData from '@/hooks/useVersionData';
+import { getEnvVar } from '@/utils/envHelper';
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -268,7 +269,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
           to: "/iter",
           path: "iter",
           icon: <BiBug className='text-[22px]' />,
-          name: <div>更新日志 <b className={`inline-block w-3 h-3 ml-2 ${version.tag_name === import.meta.env.VITE_VERSION ? 'bg-green-400' : 'bg-red-400'} rounded-full`}></b></div>
+          name: <div>更新日志 <b className={`inline-block w-3 h-3 ml-2 ${version.tag_name === getEnvVar('VITE_VERSION') ? 'bg-green-400' : 'bg-red-400'} rounded-full`}></b></div>
         }
       ]
     }

diff --git a/src/pages/Dashboard/components/HeaderInfo/index.tsx b/src/pages/Dashboard/components/HeaderInfo/index.tsx
@@ -1,7 +1,7 @@
 import { useUserStore } from '@/stores';
 import { FaDownload } from "react-icons/fa6";
 import useVersionData from '@/hooks/useVersionData';
-
+import { getEnvVar } from '@/utils/envHelper';
 
 const HeaderInfo = () => {
     const { user } = useUserStore();
@@ -28,12 +28,12 @@ const HeaderInfo = () => {
             {/* 项目版本号 */}
             <div className='hidden md:flex md:flex-col space-y-1 xl:mr-30'>
                 {
-                    version.tag_name === import.meta.env.VITE_VERSION
+                    version.tag_name === getEnvVar('VITE_VERSION')
                         ? <p>🎉 当前版本为：<b className='inline-block px-2 text-white bg-green-600 rounded-md'>{version.tag_name} 最新版</b></p>
                         : (
                             <>
                                 <div className='flex space-x-4'>
-                                    <p>当前版本：<b className='inline-block px-2 text-white bg-blue-400 rounded-md'>{import.meta.env.VITE_VERSION}</b></p>
+                                    <p>当前版本：<b className='inline-block px-2 text-white bg-blue-400 rounded-md'>{getEnvVar('VITE_VERSION')}</b></p>
                                     <p>最新版本：<b className='inline-block px-2 text-white bg-red-500 rounded-md'>{version.tag_name}</b></p>
                                 </div>
 

diff --git a/src/pages/Dashboard/components/Stats/components/NewOldVisitors/index.tsx b/src/pages/Dashboard/components/Stats/components/NewOldVisitors/index.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import ReactApexChart from 'react-apexcharts';
 import dayjs from 'dayjs';
 import { Spin } from 'antd';
+import { getEnvVar } from '@/utils/envHelper';
 
 interface ChartThreeState {
   series: number[];
@@ -64,8 +65,8 @@ export default () => {
     setLoading(true)
 
     try {
-      const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID;
-      const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN;
+      const siteId = getEnvVar('VITE_BAIDU_TONGJI_SITE_ID');
+      const token = getEnvVar('VITE_BAIDU_TONGJI_ACCESS_TOKEN');
 
       const response = await fetch(`/baidu/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${date}&end_date=${date}&metrics=new_visitor_count%2Cnew_visitor_ratio&method=trend%2Ftime%2Fa&gran=day&area=`);
       const data = await response.json();

diff --git a/src/pages/Dashboard/components/Stats/components/VisitorsStatisChat/index.tsx b/src/pages/Dashboard/components/Stats/components/VisitorsStatisChat/index.tsx
@@ -3,6 +3,7 @@ import { Spin } from 'antd';
 import { ApexOptions } from 'apexcharts';
 import ReactApexChart from 'react-apexcharts';
 import dayjs from 'dayjs';
+import { getEnvVar } from '@/utils/envHelper';
 
 interface Result {
     timeSpan: string[];
@@ -150,8 +151,8 @@ export default () => {
         try {
             setLoading(true)
 
-            const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID;
-            const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN;
+            const siteId = getEnvVar('VITE_BAIDU_TONGJI_SITE_ID');
+            const token = getEnvVar('VITE_BAIDU_TONGJI_ACCESS_TOKEN');
 
             const response = await fetch(`/baidu/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${startDate}&end_date=${endDate}&metrics=pv_count%2Cip_count&method=overview%2FgetTimeTrendRpt`);
             const data = await response.json();

diff --git a/src/pages/Dashboard/components/Stats/index.tsx b/src/pages/Dashboard/components/Stats/index.tsx
@@ -6,6 +6,7 @@ import CardDataStats from "@/components/CardDataStats"
 
 import { AiOutlineEye, AiOutlineMeh, AiOutlineStock, AiOutlineFieldTime } from "react-icons/ai";
 import dayjs from 'dayjs';
+import {getEnvVar} from "@/utils/envHelper";
 
 export default () => {
     const [loading, setLoading] = useState(false)
@@ -34,8 +35,8 @@ export default () => {
         try {
             setLoading(true)
 
-            const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID;
-            const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN;
+            const siteId = getEnvVar('VITE_BAIDU_TONGJI_SITE_ID');
+            const token = getEnvVar('VITE_BAIDU_TONGJI_ACCESS_TOKEN');
 
             const response = await fetch(`/baidu/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${date}&end_date=${date}&metrics=pv_count%2Cip_count%2Cbounce_ratio%2Cavg_visit_time&method=overview%2FgetTimeTrendRpt`);
             const data = await response.json();

diff --git a/src/pages/Footprint/index.tsx b/src/pages/Footprint/index.tsx
@@ -10,6 +10,7 @@ import dayjs from 'dayjs';
 import axios from 'axios';
 import { CloudUploadOutlined } from '@ant-design/icons';
 import Material from '@/components/Material';
+import { getEnvVar } from '@/utils/envHelper';
 
 export default () => {
   const [loading, setLoading] = useState<boolean>(false);
@@ -24,6 +25,7 @@ export default () => {
   const [isMethod, setIsMethod] = useState<'create' | 'edit'>('create');
   const [form] = Form.useForm();
 
+
   const columns = [
     {
       title: 'ID',
@@ -209,7 +211,7 @@ export default () => {
       const { data } = await axios.get('https://restapi.amap.com/v3/geocode/geo', {
         params: {
           address,
-          key: import.meta.env.VITE_GAODE_WEB_API
+          key: getEnvVar('VITE_GAODE_WEB_API')
         }
       });
 

diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -0,0 +1,5 @@
+declare interface Window {
+  ENV: {
+    [key: string]: string
+  }
+}
diff --git a/src/utils/envHelper.ts b/src/utils/envHelper.ts
@@ -0,0 +1,15 @@
+/**
+ * 统一获取环境变量工具
+ * 容器运行时从import.meta.env获取
+ * 镜像运行时从window.ENV获取
+ */
+
+export const getEnvVar = (key: string): string => {
+  // 优先从window.ENV获取
+  if (window.ENV && window.ENV[key]) {
+    return window.ENV[key] || '';
+  }
+
+  // 默认从import.meta.env获取
+  return import.meta.env[key as keyof ImportMetaEnv] || '';
+};
diff --git a/src/utils/request.ts b/src/utils/request.ts
@@ -1,10 +1,11 @@
 import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from "axios";
 import { Modal, notification } from "antd";
 import { useUserStore } from "@/stores";
+import { getEnvVar } from "@/utils/envHelper";
 
 // 配置项目API域名
 // 最新调整：在本地 .env 文件配置你的后端API地址
-export const baseURL = import.meta.env.VITE_PROJECT_API;
+export const baseURL = getEnvVar('VITE_PROJECT_API')
 
 // 创建 axios 实例
 export const instance = axios.create({