Merge 64c98777a8 into 31fbf7e48a

2025-11-04 16:23:42 +08:00 · 2025-06-03 11:33:59 +08:00
parent 31fbf7e48a 64c98777a8
commit 32539e57b5
50 changed files with 717 additions and 5837 deletions
--- a/web/.env.development
+++ b/web/.env.development
@@ -1,11 +1,11 @@
-VUE_APP_API_HOST=http://localhost:5678
-VUE_APP_WS_HOST=ws://localhost:5678
-VUE_APP_USER=18888888888
-VUE_APP_PASS=12345678
-VUE_APP_ADMIN_USER=admin
-VUE_APP_ADMIN_PASS=admin123
-VUE_APP_KEY_PREFIX=GeekAI_DEV_
-VUE_APP_TITLE="Geek-AI 创作系统"
-VUE_APP_VERSION=v4.1.8
-VUE_APP_DOCS_URL=https://docs.geekai.me
-VUE_APP_GIT_URL=https://github.com/yangjian102621/geekai
+VITE_APP_API_HOST=http://localhost:5678
+VITE_APP_WS_HOST=ws://localhost:5678
+VITE_APP_USER=18888888888
+VITE_APP_PASS=12345678
+VITE_APP_ADMIN_USER=admin
+VITE_APP_ADMIN_PASS=admin123
+VITE_APP_KEY_PREFIX=GeekAI_DEV_
+VITE_APP_TITLE="Geek-AI 创作系统"
+VITE_APP_VERSION=v4.1.8
+VITE_APP_DOCS_URL=https://docs.geekai.me
+VITE_APP_GIT_URL=https://github.com/yangjian102621/geekai
--- a/web/.env.production
+++ b/web/.env.production
@@ -1,7 +1,7 @@
-VUE_APP_API_HOST=
-VUE_APP_WS_HOST=
-VUE_APP_KEY_PREFIX=GeekAI_
-VUE_APP_TITLE="Geek-AI 创作系统"
-VUE_APP_VERSION=v4.1.8
-VUE_APP_DOCS_URL=https://docs.geekai.me
-VUE_APP_GIT_URL=https://github.com/yangjian102621/geekai
+VITE_APP_API_HOST=
+VITE_APP_WS_HOST=
+VITE_APP_KEY_PREFIX=GeekAI_
+VITE_APP_TITLE="Geek-AI 创作系统"
+VITE_APP_VERSION=v4.1.8
+VITE_APP_DOCS_URL=https://docs.geekai.me
+VITE_APP_GIT_URL=https://github.com/yangjian102621/geekai
--- a/web/babel.config.js
+++ b/web/babel.config.js
@@ -1,5 +1 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+module.exports = {}
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>geekai</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="./src/main.js"></script>
+</body>
+
+</html>
--- a/web/package.json
+++ b/web/package.json
@@ -3,9 +3,9 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
@@ -22,7 +22,7 @@
    "json-bigint": "^1.0.0",
    "lodash": "^4.17.21",
    "markdown-it": "^13.0.1",
-	"markdown-it-emoji": "^2.0.0",
+    "markdown-it-emoji": "^2.0.0",
    "markdown-it-mathjax3": "^4.3.2",
    "markmap-common": "^0.16.0",
    "markmap-lib": "^0.16.1",
@@ -43,17 +43,14 @@
  "devDependencies": {
    "@babel/core": "7.18.6",
    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
+    "@vitejs/plugin-vue": "^5.2.4",
    "autoprefixer": "^10.4.20",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "postcss": "^8.4.49",
    "stylus": "^0.58.1",
-    "stylus-loader": "^7.0.0",
    "tailwindcss": "^3.4.17",
-    "webpack": "^5.90.3"
+    "vite": "^6.3.5"
  },
  "eslintConfig": {
    "root": true,
@@ -75,4 +72,4 @@
    "not dead",
    "not ie 11"
  ]
-}
+}
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
--- 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;
--- 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
--- 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: "",
--- 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;
@@ -334,5 +334,5 @@ defineExpose({ connect, hangUp });

 <style scoped lang="stylus">

-@import "@/assets/css/realtime.styl"
+@import "../assets/css/realtime.styl"
 </style>
--- a/web/src/components/TaskList.vue
+++ b/web/src/components/TaskList.vue
@@ -34,5 +34,5 @@ const props = defineProps({
 </script>

 <style scoped lang="stylus">
-@import "~@/assets/css/running-job-list.styl"
+@import "../assets/css/running-job-list.styl"
 </style>
--- 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([
  "用小学生都能听懂的术语解释什么是量子纠缠",
--- 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();
--- 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)
--- 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_')
 }
--- 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'

--- 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)
--- a/web/src/views/ChatApps.vue
+++ b/web/src/views/ChatApps.vue
@@ -175,6 +175,6 @@ const useRole = (role) => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/chat-app.styl"
-@import "@/assets/css/custom-scroll.styl"
+@import "../assets/css/chat-app.styl"
+@import "../assets/css/custom-scroll.styl"
 </style>
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -975,7 +975,7 @@ const realtimeChat = () => {
 </script>

 <style scoped lang="stylus">
-@import "@/assets/css/chat-plus.styl"
+@import "../assets/css/chat-plus.styl"
 </style>

 <style lang="stylus">
--- a/web/src/views/Dalle.vue
+++ b/web/src/views/Dalle.vue
@@ -486,6 +486,6 @@ const changeModel = (model) => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/image-dall.styl"
-@import "@/assets/css/custom-scroll.styl"
+@import "../assets/css/image-dall.styl"
+@import "../assets/css/custom-scroll.styl"
 </style>
--- 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);

 /**
@@ -294,6 +294,6 @@ const loginSuccess = () => {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/custom-scroll.styl"
-@import "@/assets/css/home.styl"
+@import "../assets/css/custom-scroll.styl"
+@import "../assets/css/home.styl"
 </style>
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -1101,6 +1101,6 @@ const generatePrompt = () => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/image-mj.styl"
-@import "@/assets/css/custom-scroll.styl"
+@import "../assets/css/image-mj.styl"
+@import "../assets/css/custom-scroll.styl"
 </style>
--- a/web/src/views/ImageSd.vue
+++ b/web/src/views/ImageSd.vue
@@ -582,6 +582,6 @@ const generatePrompt = () => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/image-sd.styl"
-@import "@/assets/css/custom-scroll.styl"
+@import "../assets/css/image-sd.styl"
+@import "../assets/css/custom-scroll.styl"
 </style>
--- a/web/src/views/ImagesWall.vue
+++ b/web/src/views/ImagesWall.vue
@@ -300,6 +300,6 @@ const drawSameMj = (row) => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/images-wall.styl"
-@import "@/assets/css/custom-scroll.styl"
+@import "../assets/css/images-wall.styl"
+@import "../assets/css/custom-scroll.styl"
 </style>
--- 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({
@@ -168,5 +168,5 @@ const rainbowColor = (index) => {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/index.styl"
+@import "../assets/css/index.styl"
 </style>
--- a/web/src/views/Invitation.vue
+++ b/web/src/views/Invitation.vue
@@ -160,7 +160,7 @@ const initData = () => {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/custom-scroll.styl"
+@import "../assets/css/custom-scroll.styl"
 .page-invitation {
  display: flex;
  justify-content: center;
--- 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: "请输入账号" }],
@@ -152,5 +152,5 @@ const doLogin = (verifyData) => {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/login.styl"
+@import "../assets/css/login.styl"
 </style>
--- 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();
@@ -314,5 +314,5 @@ const generatePrompt = () => {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/luma.styl"
+@import "../assets/css/luma.styl"
 </style>
--- a/web/src/views/MarkMap.vue
+++ b/web/src/views/MarkMap.vue
@@ -291,6 +291,6 @@ const downloadImage = () => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/mark-map.styl"
-@import "@/assets/css/custom-scroll.styl"
+@import "../assets/css/mark-map.styl"
+@import "../assets/css/custom-scroll.styl"
 </style>
--- 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,
@@ -262,6 +262,6 @@ const payCallback = (success) => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/custom-scroll.styl"
-@import "@/assets/css/member.styl"
+@import "../assets/css/custom-scroll.styl"
+@import "../assets/css/member.styl"
 </style>
--- a/web/src/views/PowerLog.vue
+++ b/web/src/views/PowerLog.vue
@@ -128,7 +128,7 @@ const fetchData = () => {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/custom-scroll.styl"
+@import "../assets/css/custom-scroll.styl"
 .power-log {
  color #ffffff
  .inner {
--- a/web/src/views/RealtimeTest.vue
+++ b/web/src/views/RealtimeTest.vue
@@ -2,7 +2,7 @@
  <div data-component="ConsolePage">
    <div class="content-top">
      <div class="content-title">
-        <img src="/openai-logomark.svg" alt="OpenAI Logo" />
+        <!-- <img src="/openai-logomark.svg" alt="OpenAI Logo" /> -->
        <span>realtime console</span>
      </div>

--- a/web/src/views/Register.vue
+++ b/web/src/views/Register.vue
@@ -231,7 +231,7 @@ const doSubmitRegister = (verifyData) => {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/login.styl"
+@import "../assets/css/login.styl"
  :deep(.back){
    margin-bottom: 10px;
  }
--- a/web/src/views/Resetpassword.vue
+++ b/web/src/views/Resetpassword.vue
@@ -146,7 +146,7 @@ const save = () => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/login.styl"
+@import "../assets/css/login.styl"
 ::v-deep(.el-tabs__item.is-active, .el-tabs__item:hover){
    color: var(--common-text-color) !important;
  }
--- a/web/src/views/Song.vue
+++ b/web/src/views/Song.vue
@@ -102,5 +102,5 @@ const getShareURL = (item) => {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/song.styl"
+@import "../assets/css/song.styl"
 </style>
--- 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();
@@ -635,5 +635,5 @@ const createLyric = () => {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/suno.styl"
+@import "../assets/css/suno.styl"
 </style>
--- a/web/src/views/admin/ChatModel.vue
+++ b/web/src/views/admin/ChatModel.vue
@@ -326,7 +326,7 @@ const remove = function (row) {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/admin/form.styl";
+@import "../../assets/css/admin/form.styl";
 .model-list {

  .handle-box {
--- a/web/src/views/admin/Home.vue
+++ b/web/src/views/admin/Home.vue
@@ -56,5 +56,5 @@ watch(
 </script>

 <style scoped lang="stylus">
-@import '@/assets/css/main.styl';
+@import '../../assets/css/main.styl';
 </style>
--- 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);
--- a/web/src/views/admin/Menu.vue
+++ b/web/src/views/admin/Menu.vue
@@ -240,8 +240,8 @@ const uploadImg = (file) => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/admin/form.styl"
-@import "@/assets/css/main.styl"
+@import "../../assets/css/admin/form.styl"
+@import "../../assets/css/main.styl"
 .menu {

  .handle-box {
--- a/web/src/views/admin/SysConfig.vue
+++ b/web/src/views/admin/SysConfig.vue
@@ -593,8 +593,8 @@ const fixData = () => {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/admin/form.styl"
-@import "@/assets/css/main.styl"
+@import "../../assets/css/admin/form.styl"
+@import "../../assets/css/main.styl"
 .system-config {
  display flex
  justify-content center
--- a/web/src/views/mobile/ChatList.vue
+++ b/web/src/views/mobile/ChatList.vue
@@ -262,5 +262,5 @@ const removeChat = (item) => {
 </script>

 <style lang="stylus" scoped>
-@import "@/assets/css/mobile/chat-list.styl"
+@import "../../assets/css/mobile/chat-list.styl"
 </style>
--- 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;
@@ -634,5 +634,5 @@ const getModelName = (model_id) => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/mobile/chat-session.styl"
+@import "../../assets/css/mobile/chat-session.styl"
 </style>
--- 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([]);
--- 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,
--- a/web/src/views/mobile/pages/ImageDall.vue
+++ b/web/src/views/mobile/pages/ImageDall.vue
@@ -435,5 +435,5 @@ const modelConfirm = (item) => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/mobile/image-sd.styl"
+@import "../../../assets/css/mobile/image-sd.styl"
 </style>
--- a/web/src/views/mobile/pages/ImageMj.vue
+++ b/web/src/views/mobile/pages/ImageMj.vue
@@ -603,5 +603,5 @@ const tabChange = (tab) => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/mobile/image-mj.styl"
+@import "../../../assets/css/mobile/image-mj.styl"
 </style>
--- a/web/src/views/mobile/pages/ImageSd.vue
+++ b/web/src/views/mobile/pages/ImageSd.vue
@@ -467,5 +467,5 @@ const showInfo = (message) => {
 </script>

 <style lang="stylus">
-@import "@/assets/css/mobile/image-sd.styl"
+@import "../../../assets/css/mobile/image-sd.styl"
 </style>
--- a/web/vite.config.js
+++ 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
+    },
+  };
+});
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -1,36 +0,0 @@
-const { defineConfig } = require("@vue/cli-service");
-const path = require("path");
-let webpack = require("webpack");
-module.exports = defineConfig({
-  transpileDependencies: true,
-  lintOnSave: false, //关闭eslint校验
-  productionSourceMap: false, //在生产模式中禁用 Source Map，既可以减少包大小，也可以加密源码
-
-  configureWebpack: {
-    // disable performance hints
-    performance: {
-      hints: false,
-    },
-    plugins: [new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 10000 })],
-    resolve: {
-      alias: {
-        "@": path.resolve(__dirname, "src"),
-      },
-    },
-  },
-
-  publicPath: "/",
-
-  outputDir: "dist",
-  crossorigin: "anonymous",
-  devServer: {
-    allowedHosts: "all",
-    port: 8888,
-    proxy: {
-      "/static/upload/": {
-        target: process.env.VUE_APP_API_HOST,
-        changeOrigin: true,
-      },
-    },
-  },
-});