diff --git a/frontend/craco.config.js b/frontend/craco.config.js
index 948da3d15..e2f1ef5d6 100644
--- a/frontend/craco.config.js
+++ b/frontend/craco.config.js
@@ -61,7 +61,7 @@ module.exports = {
           chunkFilename: 'static/js/[name].[contenthash:8].js',
         },
         // path: path.resolve(__dirname, 'dist'), // 修改输出文件目录
-        publicPath: '/',
+        publicPath: `${process.env.PUBLIC_URL || ''}/`,
       };
       /**
        * webpack split chunks
diff --git a/frontend/src/app/AppRouter.tsx b/frontend/src/app/AppRouter.tsx
index 3d31bdc5e..fa89464ad 100644
--- a/frontend/src/app/AppRouter.tsx
+++ b/frontend/src/app/AppRouter.tsx
@@ -19,7 +19,7 @@
 import { ConfigProvider, message } from 'antd';
 import echartsDefaultTheme from 'app/assets/theme/echarts_default_theme.json';
 import { registerTheme } from 'echarts';
-import { StorageKeys } from 'globalConstants';
+import { PUBLIC_URL, StorageKeys } from 'globalConstants';
 import { antdLocales } from 'locales/i18n';
 import { useEffect, useLayoutEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
@@ -65,7 +65,7 @@ export function AppRouter() {
 
   return (
     <ConfigProvider locale={antdLocales[i18n.language]}>
-      <BrowserRouter>
+      <BrowserRouter basename={PUBLIC_URL}>
         <Helmet
           titleTemplate="%s - Datart"
           defaultTitle="Datart"
diff --git a/frontend/src/app/pages/DashBoardPage/utils/index.ts b/frontend/src/app/pages/DashBoardPage/utils/index.ts
index 2ddb32c08..0806fc97f 100644
--- a/frontend/src/app/pages/DashBoardPage/utils/index.ts
+++ b/frontend/src/app/pages/DashBoardPage/utils/index.ts
@@ -40,6 +40,7 @@ import { getTime, splitRangerDateFilters } from 'app/utils/time';
 import {
   DATE_FORMATTER,
   FilterSqlOperator,
+  PUBLIC_URL,
   TIME_FORMATTER,
 } from 'globalConstants';
 import moment from 'moment';
@@ -73,7 +74,7 @@ export const dateFormatObj = {
 
 export const convertImageUrl = (urlKey: string = ''): string => {
   if (urlKey.startsWith(BOARD_FILE_IMG_PREFIX)) {
-    return `${window.location.origin}/${urlKey}`;
+    return `${window.location.origin}${PUBLIC_URL}/${urlKey}`;
   }
   return urlKey;
 };
diff --git a/frontend/src/app/pages/SharePage/Chart/Router.tsx b/frontend/src/app/pages/SharePage/Chart/Router.tsx
index 752cc92b0..c673d4525 100644
--- a/frontend/src/app/pages/SharePage/Chart/Router.tsx
+++ b/frontend/src/app/pages/SharePage/Chart/Router.tsx
@@ -19,6 +19,7 @@
 import { ConfigProvider } from 'antd';
 import echartsDefaultTheme from 'app/assets/theme/echarts_default_theme.json';
 import { registerTheme } from 'echarts';
+import { PUBLIC_URL } from 'globalConstants';
 import { antdLocales } from 'locales/i18n';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
@@ -33,13 +34,11 @@ export function Router() {
 
   return (
     <ConfigProvider locale={antdLocales[i18n.language]}>
-      <BrowserRouter>
+      <BrowserRouter basename={PUBLIC_URL}>
         <HelmetPageTitle lang={i18n.language} />
-        <BrowserRouter>
-          <Switch>
-            <Route path="/shareChart/:token" component={LazyShareChart} />
-          </Switch>
-        </BrowserRouter>
+        <Switch>
+          <Route path="/shareChart/:token" component={LazyShareChart} />
+        </Switch>
         <GlobalStyles />
       </BrowserRouter>
     </ConfigProvider>
diff --git a/frontend/src/app/pages/SharePage/Dashboard/Router.tsx b/frontend/src/app/pages/SharePage/Dashboard/Router.tsx
index 37dfaa18d..2a6c6cabd 100644
--- a/frontend/src/app/pages/SharePage/Dashboard/Router.tsx
+++ b/frontend/src/app/pages/SharePage/Dashboard/Router.tsx
@@ -19,6 +19,7 @@
 import { ConfigProvider } from 'antd';
 import echartsDefaultTheme from 'app/assets/theme/echarts_default_theme.json';
 import { registerTheme } from 'echarts';
+import { PUBLIC_URL } from 'globalConstants';
 import { antdLocales } from 'locales/i18n';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
@@ -33,7 +34,7 @@ export function Router() {
 
   return (
     <ConfigProvider locale={antdLocales[i18n.language]}>
-      <BrowserRouter>
+      <BrowserRouter basename={PUBLIC_URL}>
         <HelmetPageTitle lang={i18n.language} />
         <Switch>
           <Route path="/shareDashboard/:token" component={LazyShareDashboard} />
diff --git a/frontend/src/app/pages/SharePage/StoryPlayer/Router.tsx b/frontend/src/app/pages/SharePage/StoryPlayer/Router.tsx
index 72ebaa344..c7e1bc55f 100644
--- a/frontend/src/app/pages/SharePage/StoryPlayer/Router.tsx
+++ b/frontend/src/app/pages/SharePage/StoryPlayer/Router.tsx
@@ -19,6 +19,7 @@
 import { ConfigProvider } from 'antd';
 import echartsDefaultTheme from 'app/assets/theme/echarts_default_theme.json';
 import { registerTheme } from 'echarts';
+import { PUBLIC_URL } from 'globalConstants';
 import { antdLocales } from 'locales/i18n';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
@@ -33,7 +34,7 @@ export function Router() {
 
   return (
     <ConfigProvider locale={antdLocales[i18n.language]}>
-      <BrowserRouter>
+      <BrowserRouter basename={PUBLIC_URL}>
         <HelmetPageTitle lang={i18n.language} />
         <Switch>
           <Route
diff --git a/frontend/src/app/utils/fetch.ts b/frontend/src/app/utils/fetch.ts
index f0e0391c7..7b696b173 100644
--- a/frontend/src/app/utils/fetch.ts
+++ b/frontend/src/app/utils/fetch.ts
@@ -30,6 +30,7 @@ import {
   transformToViewConfig,
 } from 'app/utils/internalChartHelper';
 import { saveAs } from 'file-saver';
+import { PUBLIC_URL } from 'globalConstants';
 import i18next from 'i18next';
 import qs from 'qs';
 import { request2, requestWithHeader } from 'utils/request';
@@ -250,7 +251,7 @@ export async function downloadFile(id) {
 
 export async function fetchPluginChart(path) {
   const result = await request2(path, {
-    baseURL: '/',
+    baseURL: PUBLIC_URL,
     headers: { Accept: 'application/javascript' },
   }).catch(error => {
     console.error(error);
diff --git a/frontend/src/globalConstants.ts b/frontend/src/globalConstants.ts
index 4aef5ad4c..cb9d607d9 100644
--- a/frontend/src/globalConstants.ts
+++ b/frontend/src/globalConstants.ts
@@ -37,8 +37,9 @@ export enum StorageKeys {
   Theme = 'THEME',
 }
 
-export const BASE_API_URL = '/api/v1';
-export const BASE_RESOURCE_URL = '/';
+export const PUBLIC_URL = process?.env?.PUBLIC_URL || '';
+export const BASE_API_URL = `${PUBLIC_URL}/api/v1`;
+export const BASE_RESOURCE_URL = `${PUBLIC_URL}/`;
 // 1 hour
 export const DEFAULT_AUTHORIZATION_TOKEN_EXPIRATION = 1000 * 60 * 60;
 
diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts
index 227cd2e85..4faa34717 100644
--- a/frontend/src/utils/request.ts
+++ b/frontend/src/utils/request.ts
@@ -18,7 +18,7 @@
 
 import { message } from 'antd';
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
-import { BASE_API_URL } from 'globalConstants';
+import { BASE_API_URL, PUBLIC_URL } from 'globalConstants';
 import i18next from 'i18next';
 import { APIResponse } from 'types';
 import { getToken, removeToken, setToken } from './auth';
@@ -93,7 +93,7 @@ export function requestWithHeader(
 }
 
 export const getServerDomain = () => {
-  return `${window.location.protocol}//${window.location.host}`;
+  return `${window.location.protocol}//${window.location.host}${PUBLIC_URL}`;
 };
 
 function unAuthorizationErrorHandler(error) {