diff --git a/web/src/App.vue b/web/src/App.vue
index ba8f62e8..e6797066 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -68,7 +68,7 @@ watch(
 const handler = ref(0);
 // 初始化 websocket 连接
 const connect = () => {
-  let host = process.env.VUE_APP_WS_HOST;
+  let host = import.meta.env.VITE_APP_WS_HOST;
   if (host === "") {
     if (location.protocol === "https:") {
       host = "wss://" + location.host;
diff --git a/web/src/components/FooterBar.vue b/web/src/components/FooterBar.vue
index 3ff6fb03..2cd1d73e 100644
--- a/web/src/components/FooterBar.vue
+++ b/web/src/components/FooterBar.vue
@@ -20,8 +20,8 @@ import { showMessageError } from "@/utils/dialog";
 import { getLicenseInfo, getSystemInfo } from "@/store/cache";
 
 const title = ref("");
-const version = ref(process.env.VUE_APP_VERSION);
-const gitURL = ref(process.env.VUE_APP_GIT_URL);
+const version = ref(import.meta.env.VITE_APP_VERSION);
+const gitURL = ref(import.meta.env.VITE_APP_GIT_URL);
 const copyRight = ref("");
 const license = ref({});
 const props = defineProps({
@@ -34,7 +34,7 @@ const props = defineProps({
 // 获取系统配置
 getSystemInfo()
   .then((res) => {
-    title.value = res.data.title ?? process.env.VUE_APP_TITLE;
+    title.value = res.data.title ?? import.meta.env.VITE_APP_TITLE;
     copyRight.value =
       res.data.copyright.length > 1
         ? res.data.copyright
diff --git a/web/src/components/LoginDialog.vue b/web/src/components/LoginDialog.vue
index 4dd980a8..499ff6e1 100644
--- a/web/src/components/LoginDialog.vue
+++ b/web/src/components/LoginDialog.vue
@@ -218,8 +218,8 @@ watch(
 
 const login = ref(true);
 const data = ref({
-  username: process.env.VUE_APP_USER,
-  password: process.env.VUE_APP_PASS,
+  username: import.meta.env.VITE_APP_USER,
+  password: import.meta.env.VITE_APP_PASS,
   mobile: "",
   email: "",
   repass: "",
diff --git a/web/src/components/RealtimeConversation.vue b/web/src/components/RealtimeConversation.vue
index 77739034..b537a48a 100644
--- a/web/src/components/RealtimeConversation.vue
+++ b/web/src/components/RealtimeConversation.vue
@@ -107,7 +107,7 @@ const animateVoice = () => {
 
 const wavRecorder = ref(new WavRecorder({ sampleRate: 24000 }));
 const wavStreamPlayer = ref(new WavStreamPlayer({ sampleRate: 24000 }));
-let host = process.env.VUE_APP_WS_HOST;
+let host = import.meta.env.VITE_APP_WS_HOST;
 if (host === "") {
   if (location.protocol === "https:") {
     host = "wss://" + location.host;
diff --git a/web/src/components/Welcome.vue b/web/src/components/Welcome.vue
index a058f571..9fefa806 100644
--- a/web/src/components/Welcome.vue
+++ b/web/src/components/Welcome.vue
@@ -62,8 +62,8 @@ import { onMounted, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { getSystemInfo } from "@/store/cache";
 
-const title = ref(process.env.VUE_APP_TITLE);
-const version = ref(process.env.VUE_APP_VERSION);
+const title = ref(import.meta.env.VITE_APP_TITLE);
+const version = ref(import.meta.env.VITE_APP_VERSION);
 
 const samples = ref([
   "用小学生都能听懂的术语解释什么是量子纠缠",
diff --git a/web/src/components/admin/AdminHeader.vue b/web/src/components/admin/AdminHeader.vue
index 9d851e26..ee3f56c6 100644
--- a/web/src/components/admin/AdminHeader.vue
+++ b/web/src/components/admin/AdminHeader.vue
@@ -52,7 +52,7 @@ import {ElMessage} from "element-plus";
 import {removeAdminToken} from "@/store/session";
 import {useSharedStore} from "@/store/sharedata";
 
-const version = ref(process.env.VUE_APP_VERSION);
+const version = ref(import.meta.env.VITE_APP_VERSION);
 const avatar = ref("/images/user-info.jpg");
 const sidebar = useSidebarStore();
 const router = useRouter();
diff --git a/web/src/store/session.js b/web/src/store/session.js
index 61ea482e..4b790fae 100644
--- a/web/src/store/session.js
+++ b/web/src/store/session.js
@@ -6,8 +6,8 @@ import {removeAdminInfo} from "@/store/cache";
  * storage handler
  */
 
-const UserTokenKey = process.env.VUE_APP_KEY_PREFIX + "Authorization";
-const AdminTokenKey = process.env.VUE_APP_KEY_PREFIX + "Admin-Authorization"
+const UserTokenKey = import.meta.env.VITE_APP_KEY_PREFIX + "Authorization";
+const AdminTokenKey = import.meta.env.VITE_APP_KEY_PREFIX + "Admin-Authorization"
 
 export function getSessionId() {
     return randString(42)
diff --git a/web/src/store/system.js b/web/src/store/system.js
index d9523657..7f5978a0 100644
--- a/web/src/store/system.js
+++ b/web/src/store/system.js
@@ -46,9 +46,9 @@ export function FormatFileSize(bytes) {
 }
 
 export function setRoute(path) {
-    Storage.set(process.env.VUE_APP_KEY_PREFIX + 'ROUTE_',path)
+    Storage.set(import.meta.env.VITE_APP_KEY_PREFIX + 'ROUTE_', path)
 }
 
 export function getRoute() {
-    return Storage.get(process.env.VUE_APP_KEY_PREFIX + 'ROUTE_')
+    return Storage.get(import.meta.env.VITE_APP_KEY_PREFIX + 'ROUTE_')
 }
diff --git a/web/src/utils/http.js b/web/src/utils/http.js
index a06123ea..ce7e4b13 100644
--- a/web/src/utils/http.js
+++ b/web/src/utils/http.js
@@ -9,7 +9,7 @@ import axios from 'axios'
 import {getAdminToken, getUserToken, removeAdminToken, removeUserToken} from "@/store/session";
 
 axios.defaults.timeout = 180000
-axios.defaults.baseURL = process.env.VUE_APP_API_HOST
+axios.defaults.baseURL = import.meta.env.VITE_APP_API_HOST
 axios.defaults.withCredentials = true;
 //axios.defaults.headers.post['Content-Type'] = 'application/json'
 
diff --git a/web/src/utils/libs.js b/web/src/utils/libs.js
index 22d6fa10..645d0628 100644
--- a/web/src/utils/libs.js
+++ b/web/src/utils/libs.js
@@ -228,7 +228,7 @@ export const replaceImg =(img) => {
     if (!img.startsWith("http")) {
         img = `${location.protocol}//${location.host}/${img}`
     }
-    const devHost = process.env.VUE_APP_API_HOST
+    const devHost = import.meta.env.VITE_APP_API_HOST
     const localhost = "http://localhost:5678"
     if (img.includes(localhost)) {
         return img?.replace(localhost, devHost)
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index a85bf282..a7582905 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -169,7 +169,7 @@ const loginUser = ref({});
 const routerViewKey = ref(0);
 const showConfigDialog = ref(false);
 const license = ref({ de_copy: true });
-const gitURL = ref(process.env.VUE_APP_GIT_URL);
+const gitURL = ref(import.meta.env.VITE_APP_GIT_URL);
 const showLoginDialog = ref(false);
 
 /**
diff --git a/web/src/views/Index.vue b/web/src/views/Index.vue
index 67130192..aaa1b6fc 100644
--- a/web/src/views/Index.vue
+++ b/web/src/views/Index.vue
@@ -80,8 +80,8 @@ const slogan = ref("");
 const license = ref({ de_copy: true });
 
 const isLogin = ref(false);
-const docsURL = ref(process.env.VUE_APP_DOCS_URL);
-const gitURL = ref(process.env.VUE_APP_GIT_URL);
+const docsURL = ref(import.meta.env.VITE_APP_DOCS_URL);
+const gitURL = ref(import.meta.env.VITE_APP_GIT_URL);
 const navs = ref([]);
 
 const iconMap = ref({
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 563dfa22..7bfa7e22 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -62,8 +62,8 @@ const enableVerify = ref(false);
 const captchaRef = ref(null);
 const ruleFormRef = ref(null);
 const ruleForm = reactive({
-  username: process.env.VUE_APP_USER,
-  password: process.env.VUE_APP_PASS,
+  username: import.meta.env.VITE_APP_USER,
+  password: import.meta.env.VITE_APP_PASS,
 });
 const rules = {
   username: [{ required: true, trigger: "blur", message: "请输入账号" }],
diff --git a/web/src/views/Luma.vue b/web/src/views/Luma.vue
index 462fcdab..9d4c5753 100644
--- a/web/src/views/Luma.vue
+++ b/web/src/views/Luma.vue
@@ -171,7 +171,7 @@ onUnmounted(() => {
 
 const download = (item) => {
   const url = replaceImg(item.video_url);
-  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`;
+  const downloadURL = `${import.meta.env.VITE_APP_API_HOST}/api/download?url=${url}`;
   // parse filename
   const urlObj = new URL(url);
   const fileName = urlObj.pathname.split("/").pop();
diff --git a/web/src/views/Member.vue b/web/src/views/Member.vue
index fd3d82fb..651eb5a1 100644
--- a/web/src/views/Member.vue
+++ b/web/src/views/Member.vue
@@ -209,11 +209,11 @@ const pay = (product, payWay) => {
   }
   loading.value = true;
   loadingText.value = "正在生成支付订单...";
-  let host = process.env.VUE_APP_API_HOST;
+  let host = import.meta.env.VITE_APP_API_HOST;
   if (host === "") {
     host = `${location.protocol}//${location.host}`;
   }
-  httpPost(`${process.env.VUE_APP_API_HOST}/api/payment/doPay`, {
+  httpPost(`${import.meta.env.VITE_APP_API_HOST}/api/payment/doPay`, {
     product_id: product.id,
     pay_way: payWay.pay_way,
     pay_type: payWay.pay_type,
diff --git a/web/src/views/Suno.vue b/web/src/views/Suno.vue
index db2fc379..1e50032a 100644
--- a/web/src/views/Suno.vue
+++ b/web/src/views/Suno.vue
@@ -447,7 +447,7 @@ const merge = (item) => {
 // 下载歌曲
 const download = (item) => {
   const url = replaceImg(item.audio_url);
-  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`;
+  const downloadURL = `${import.meta.env.VITE_APP_API_HOST}/api/download?url=${url}`;
   // parse filename
   const urlObj = new URL(url);
   const fileName = urlObj.pathname.split("/").pop();
diff --git a/web/src/views/admin/Login.vue b/web/src/views/admin/Login.vue
index 2396f661..3466caa3 100644
--- a/web/src/views/admin/Login.vue
+++ b/web/src/views/admin/Login.vue
@@ -52,8 +52,8 @@ import Captcha from "@/components/Captcha.vue";
 
 const router = useRouter();
 const title = ref("Geek-AI Console");
-const username = ref(process.env.VUE_APP_ADMIN_USER);
-const password = ref(process.env.VUE_APP_ADMIN_PASS);
+const username = ref(import.meta.env.VITE_APP_ADMIN_USER);
+const password = ref(import.meta.env.VITE_APP_ADMIN_PASS);
 const logo = ref("");
 const enableVerify = ref(false);
 const captchaRef = ref(null);
diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue
index b5ac8c1f..187dee74 100644
--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -382,7 +382,7 @@ watch(
 // const connect = function () {
 //   // 初始化 WebSocket 对象
 //   const _sessionId = getSessionId();
-//   let host = process.env.VUE_APP_WS_HOST
+//   let host = import.meta.env.VITE_APP_WS_HOST
 //   if (host === '') {
 //     if (location.protocol === 'https:') {
 //       host = 'wss://' + location.host;
diff --git a/web/src/views/mobile/Index.vue b/web/src/views/mobile/Index.vue
index 0d67749f..963a51f9 100644
--- a/web/src/views/mobile/Index.vue
+++ b/web/src/views/mobile/Index.vue
@@ -74,7 +74,7 @@ import { arrayContains, removeArrayItem, showLoginDialog, substr } from "@/utils
 import { showNotify } from "vant";
 import { ElMessage } from "element-plus";
 
-const title = ref(process.env.VUE_APP_TITLE);
+const title = ref(import.meta.env.VITE_APP_TITLE);
 const router = useRouter();
 const isLogin = ref(false);
 const apps = ref([]);
diff --git a/web/src/views/mobile/Profile.vue b/web/src/views/mobile/Profile.vue
index bca27b80..0a106110 100644
--- a/web/src/views/mobile/Profile.vue
+++ b/web/src/views/mobile/Profile.vue
@@ -284,11 +284,11 @@ const pay = (product, payWay) => {
     message: "正在创建订单",
     forbidClick: true,
   });
-  let host = process.env.VUE_APP_API_HOST;
+  let host = import.meta.env.VITE_APP_API_HOST;
   if (host === "") {
     host = `${location.protocol}//${location.host}`;
   }
-  httpPost(`${process.env.VUE_APP_API_HOST}/api/payment/doPay`, {
+  httpPost(`${import.meta.env.VITE_APP_API_HOST}/api/payment/doPay`, {
     product_id: product.id,
     pay_way: payWay.pay_way,
     pay_type: payWay.pay_type,
diff --git a/web/vite.config.js b/web/vite.config.js
new file mode 100644
index 00000000..9f54c22b
--- /dev/null
+++ b/web/vite.config.js
@@ -0,0 +1,53 @@
+import { defineConfig, loadEnv } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd());
+
+  console.log('VITE_API_HOST from .env:', env);
+
+  return {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+      },
+    },
+    css: {
+      preprocessorOptions: {
+        stylus: {
+          paths: [path.resolve(__dirname, 'src')],
+        },
+      },
+    },
+    build: {
+      sourcemap: false,
+      minify: 'terser',
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            vendor: ['vue', 'vue-router', 'pinia'],
+          },
+        },
+      },
+    },
+    server: {
+      port: 8888,
+      host: true,
+      proxy: {
+        '/api': {
+          target: env.VITE_APP_API_HOST,
+          changeOrigin: true,
+        },
+        '/static/upload/': {
+          target: env.VITE_APP_API_HOST,
+          changeOrigin: true,
+        },
+      },
+    },
+    esbuild: {
+      // 模拟 transpileDependencies: true
+    },
+  };
+});