feat: 更新资源引用方式&构建上传 tos

package.json

@@ -2,12 +2,15 @@
   "name": "kdoffical",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "upload-assets": "esno scripts/uploadAssets2volOSS.ts"
   },
   "dependencies": {
+    "@volcengine/tos-sdk": "^2.7.5",
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "latest",
@@ -20,6 +23,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
+    "esno": "^4.8.0",
     "vite": "^4.0.0"
   }
 }

scripts/uploadAssets2volOSS.ts

@@ -0,0 +1,131 @@
+// Access Key ID	Secret Access Key
+// AKLTZDY5ZjE0ZjMxODdiNDhjODkyYzhkODY2MmUwYmZlMzc	TjJaak5XVTBOR0ZtTTJRek5HWTRPRGhoT0RBellXUTNORFV3WmpOa1pERQ==
+
+// S3 endpoint：tos-cn-beijing.volces.com
+// 外网访问：tos-s3-cn-beijing.volces.com
+// Bucket 域名：kdesign-offical.tos-cn-beijing.volces.com
+
+import { TosClient } from '@volcengine/tos-sdk';
+import * as fs from 'fs';
+import * as path from 'path';
+
+
+// 配置信息
+const config = {
+  accessKeyId: 'AKLTZDY5ZjE0ZjMxODdiNDhjODkyYzhkODY2MmUwYmZlMzc',
+  secretAccessKey: 'TjJaak5XVTBOR0ZtTTJRek5HWTRPRGhoT0RBellXUTNORFV3WmpOa1pERQ==',
+  endpoint: 'tos-cn-beijing.volces.com',
+  region: 'cn-beijing',
+  bucket: 'kdesign-offical'
+};
+
+// 创建 TOS 客户端
+const client = new TosClient({
+  accessKeyId: config.accessKeyId,
+  accessKeySecret: config.secretAccessKey,
+  endpoint: config.endpoint,
+  region: config.region
+});
+
+// 获取文件的 Content-Type
+function getContentType(filePath: string): string {
+  const ext = path.extname(filePath).toLowerCase();
+  const contentTypeMap: Record<string, string> = {
+    '.html': 'text/html',
+    '.css': 'text/css',
+    '.js': 'application/javascript',
+    '.json': 'application/json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.mp4': 'video/mp4',
+    '.webp': 'image/webp',
+    '.ico': 'image/x-icon',
+    '.txt': 'text/plain',
+    '.pdf': 'application/pdf',
+    '.zip': 'application/zip'
+  };
+
+  return contentTypeMap[ext] || 'application/octet-stream';
+}
+
+// 递归获取目录下所有文件
+async function getAllFiles(dirPath: string, fileList: string[] = []): Promise<string[]> {
+  const files = fs.readdirSync(dirPath);
+
+  for (const file of files) {
+    const filePath = path.join(dirPath, file);
+    const stat = fs.statSync(filePath);
+
+    if (stat.isDirectory()) {
+      await getAllFiles(filePath, fileList);
+    } else {
+      fileList.push(filePath);
+    }
+  }
+
+  return fileList;
+}
+
+// 上传单个文件
+async function uploadFile(filePath: string, basePath: string): Promise<void> {
+  try {
+    // 计算相对路径作为对象键名
+    const key = filePath.replace(basePath, '').replace(/^\//, '');
+    const contentType = getContentType(filePath);
+    const fileContent = fs.readFileSync(filePath);
+
+    console.log(`上传文件: ${filePath} -> ${key}`);
+
+    const response = await client.putObject({
+      bucket: config.bucket,
+      key: key,
+      body: fileContent,
+      contentType: contentType
+    });
+
+    console.log(`上传成功: ${key}, 请求ID: ${response.requestId}`);
+  } catch (error) {
+    console.error(`上传文件 ${filePath} 失败:`, error);
+  }
+}
+
+// 上传目录下所有文件
+async function uploadDirectory(dirPath: string): Promise<void> {
+  try {
+    const basePath = path.resolve(dirPath, '..');
+    const allFiles = await getAllFiles(dirPath);
+    
+    console.log(`找到 ${allFiles.length} 个文件需要上传`);
+    
+    // 创建上传任务队列
+    const uploadTasks = allFiles.map(filePath => uploadFile(filePath, basePath));
+    
+    // 并发上传文件
+    await Promise.all(uploadTasks);
+    
+    console.log('所有文件上传完成');
+  } catch (error) {
+    console.error('上传目录失败:', error);
+  }
+}
+
+// 主函数
+async function main() {
+  // 使用 import.meta.url 替代 __dirname (ES 模块兼容)
+  const currentFileUrl = import.meta.url;
+  const currentFilePath = new URL(currentFileUrl).pathname;
+  const currentDir = path.dirname(currentFilePath);
+  const assetsDir = path.resolve(currentDir, '../dist/assets');
+  console.log(`开始上传目录: ${assetsDir}`);
+  await uploadDirectory(assetsDir);
+}
+
+// 执行主函数
+main().catch(error => {
+  console.error('程序执行失败:', error);
+  process.exit(1);
+});
+

src/components/Aboutus.vue

@@ -1,6 +1,23 @@
 <script setup>
 import { useBootstrapBreakpoint } from './useBreakpoint.js';
 import Wanted from "./Wanted.vue";
+import aboutusVideoGif from "@/assets/AboutusVideo.gif";
+import aboutusVideoPreload from "@/assets/AboutusVideoPreload.png";
+import aboutusVideoMp4 from "@/assets/AboutusVideo.mp4";
+import pcp1wep from "@/assets/AboutusRes/pcp1wep.png";
+import pcp2wep from "@/assets/AboutusRes/pcp2wep.png";
+import pcp3wep from "@/assets/AboutusRes/pcp3wep.png";
+import pcp4wep from "@/assets/AboutusRes/pcp4wep.png";
+import pcp5wep from "@/assets/AboutusRes/pcp5wep.png";
+import pcp6wep from "@/assets/AboutusRes/pcp6wep.png";
+import pcp7wep from "@/assets/AboutusRes/pcp7wep.png";
+import pcp1 from "@/assets/AboutusRes/pcp1.png";
+import pcp2 from "@/assets/AboutusRes/pcp2.png";
+import pcp3 from "@/assets/AboutusRes/pcp3.png";
+import pcp4 from "@/assets/AboutusRes/pcp4.png";
+import pcp5 from "@/assets/AboutusRes/pcp5.png";
+import pcp6 from "@/assets/AboutusRes/pcp6.png";
+import pcp7 from "@/assets/AboutusRes/pcp7.png";
 const { breakpoint } = useBootstrapBreakpoint();
 </script>
 
@@ -8,27 +25,27 @@ const { breakpoint } = useBootstrapBreakpoint();
   <div class="pageroot" id="aboutusroot">
     <div id="aboutusbanner" class="videorootbanner">
 <!--      <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
-<!--           src="/AboutusVideo.gif"-->
+<!--           :src="aboutusVideoGif"-->
 <!--           class="videoimg"/>-->
       <img v-if="$isMobile.phone"
-           src="/AboutusVideo.gif"
+           :src="aboutusVideoGif"
            class="videoimg"/>
       <video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
-             poster="/AboutusVideoPreload.png"
+             :poster="aboutusVideoPreload"
              controls=""
              id="abtbannervideo"
              muted autoplay="autoplay"
              loop="loop" playsinline webkit-playsinline
              class="bannervideos">
-        <source src="/AboutusVideo.mp4" type="video/mp4"></source>
+        <source :src="aboutusVideoMp4" type="video/mp4"></source>
       </video>
       <video v-else
-             poster="/AboutusVideoPreload.png"
+             :poster="aboutusVideoPreload"
              id="abtbannervideo"
              muted autoplay="autoplay"
              loop="loop" playsinline webkit-playsinline
              class="bannervideos">
-        <source src="/AboutusVideo.mp4" type="video/mp4"></source>
+        <source :src="aboutusVideoMp4" type="video/mp4"></source>
       </video>
       <div id="abtbanner" class="bannerovervideo">
         <div class="bannercontent">
@@ -74,44 +91,44 @@ const { breakpoint } = useBootstrapBreakpoint();
         <span class="normalcontenttitle" style="background-color: white;">设计瞬间</span>
       </div>
       <div v-if="breakpoint==='xs'||breakpoint==='sm'" id="sjsjimgwep">
-        <img src="/AboutusRes/pcp1wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp1wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp2wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp2wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp3wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp3wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp4wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp4wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp5wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp5wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp6wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp6wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp7wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp7wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
       </div>
       <div v-else id="sjsjimg">
         <div class="imgrow" style="width: 100%; height: auto;">
           <div class="imageitem" style="width: 62.571428571428571428571428571429%;">
-            <img src="/AboutusRes/pcp1.png"/>
+            <img :src="pcp1"/>
           </div>
           <div class="imageitem" style="width:1.428571428571428571428571428571%;"></div>
           <div class="imageitem" style="width: 36%;background-color: black;">
-            <img src="/AboutusRes/pcp2.png"/>
+            <img :src="pcp2"/>
           </div>
         </div>
         <div  class="imgrow" style="width: 100%; height: auto; margin-top: 20px;">
           <div class="imageitem" style="width: 32.142857142857142857142857142857%">
-            <img class="sjsjpic" src="/AboutusRes/pcp3.png"/>
+            <img class="sjsjpic" :src="pcp3"/>
           </div>
           <div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
           <div class="imageitem" style="width: 32.142857142857142857142857142857%">
-            <img src="/AboutusRes/pcp4.png"/>
+            <img :src="pcp4"/>
           </div>
           <div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
           <div class="imageitem" style="width: 32.857142857142857142857142857143%">
-            <img src="/AboutusRes/pcp5.png"/>
+            <img :src="pcp5"/>
           </div>
         </div>
         <div  class="imgrow" style="width: 100%; height: auto; margin-top: 20px;">
           <div class="imageitem" style="width: 50%;">
-            <img src="/AboutusRes/pcp6.png"/>
+            <img :src="pcp6"/>
           </div>
           <div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
           <div class="imageitem" style="width: 48.571428571428571428571428571429%;">
-            <img src="/AboutusRes/pcp7.png"/>
+            <img :src="pcp7"/>
           </div>
         </div>
       </div>
@@ -162,11 +179,11 @@ export default {
   align-items: flex-start; /* 控制水平对齐 - 靠左 */
   justify-content: center;
   @include media-breakpoint-between(xs, md) {
-    background-image: url('/AboutusRes/aboutusbanner_wep.png');
+    background-image: url('@/assets/AboutusRes/aboutusbanner_wep.png');
   }
 
   @include media-breakpoint-up(md) {
-    background-image: url('/AboutusRes/aboutusbanner.png');
+    background-image: url('@/assets/AboutusRes/aboutusbanner.png');
   }
 }
 
@@ -200,12 +217,12 @@ export default {
   @include media-breakpoint-between(xs, md) {
     background-size:100%;
     padding-bottom: 112px;
-    background-image: url('/AboutusRes/innerteamwep.png');
+    background-image: url('@/assets/AboutusRes/innerteamwep.png');
   }
 
   @include media-breakpoint-up(md) {
     padding-bottom: 164px;
-    background-image: url('/AboutusRes/innerteam.png');
+    background-image: url('@/assets/AboutusRes/innerteam.png');
   }
 
   @media (max-width: 375px) {

src/components/ContactUs.vue

@@ -41,14 +41,14 @@ export default {
   justify-content: left;
   display: flex;
   @include media-breakpoint-between(xs, md) {
-    background-image: url('/bottom/bg_wep.png');
+    background-image: url('@/assets/bottom/bg_wep.png');
     padding-left: 32px;
     padding-right: 32px;
     margin-top: 120px;
   }
 
   @include media-breakpoint-up(md) {
-    background-image: url('/bottom/bg_pc.png');
+    background-image: url('@/assets/bottom/bg_pc.png');
     padding-left: 100px;
     padding-right: 100px;
   }

src/components/Examples.vue

@@ -1,6 +1,10 @@
 <script setup>
 import ExamplesContent from './ExamplesContent.vue';
 import { useBootstrapBreakpoint } from './useBreakpoint.js'; // 假设 useBreakpoint.js 路径正确
+import ExpVideoPreload from "@/assets/ExpVideoPreload.png";
+import ExpVideo from "@/assets/ExpVideo.mp4";
+import Examplesbanner_wep from "@/assets/ExamplesRes/Examplesbanner_wep.png";
+import Examplesbanner from "@/assets/ExamplesRes/Examplesbanner.png";
 const { breakpoint } = useBootstrapBreakpoint();
 </script>
 
@@ -16,15 +20,15 @@ const { breakpoint } = useBootstrapBreakpoint();
              muted autoplay="autoplay"
              loop="loop" playsinline webkit-playsinline
              class="bannervideos">
-        <source src="/ExpVideo.mp4" type="video/mp4"></source>
+        <source :src="ExpVideo" type="video/mp4"></source>
       </video>
       <video v-else
-          poster="/ExpVideoPreload.png"
+             :poster="ExpVideoPreload"
              id="expbannervideo"
              muted autoplay="autoplay"
              loop="loop" playsinline webkit-playsinline
              class="bannervideos">
-        <source src="/ExpVideo.mp4" type="video/mp4"></source>
+        <source :src="ExpVideo" type="video/mp4"></source>
       </video>
       <div id="expbanner" class="bannerovervideo">
         <div class="bannercontent">
@@ -57,11 +61,11 @@ export default {
 
 #examplesprocessbanner{
   @include media-breakpoint-between(xs, md) {
-    background-image: url('/ExamplesRes/Examplesbanner_wep.png');
+    background-image: url('@/assets/ExamplesRes/Examplesbanner_wep.png');
   }
 
   @include media-breakpoint-up(md) {
-    background-image: url('/ExamplesRes/Examplesbanner.png');
+    background-image: url('@/assets/ExamplesRes/Examplesbanner.png');
   }
 }
 </style>

src/components/Footer.vue

@@ -28,7 +28,7 @@ export default {
   justify-content: left;
 
   @include media-breakpoint-between(xs, md) {
-    background-image: url('/bottom/bg_wep.png');
+    background-image: url('@/assets/bottom/bg_wep.png');
     padding-left: 32px;
     padding-right: 32px;
     padding-top: 66px;
@@ -37,7 +37,7 @@ export default {
 
   @include media-breakpoint-between(md,xxl){
     margin-top: 0px;
-    background-image: url('/bottom/bg_pc.png');
+    background-image: url('@/assets/bottom/bg_pc.png');
     padding-left: 100px;
     padding-right: 100px;
     padding-top: 109px;
@@ -47,7 +47,7 @@ export default {
   @include media-breakpoint-up(xxl) {
     min-height: 759px;
     margin-top: 0px;
-    background-image: url('/bottom/bg_pc.png');
+    background-image: url('@/assets/bottom/bg_pc.png');
     padding-left: 256px;
     padding-top: 109px;
     padding-bottom: 109px;

src/components/HeaderVideo.vue

@@ -1,7 +1,11 @@
 <script>
 import { defineComponent } from 'vue';
-// import { useBootstrapBreakpoint } from './useBreakpoint.js'; // Kept as in original
+import logobeginPCpld from '@/assets/logobeginPCpld.png';
-// const { breakpoint } = useBootstrapBreakpoint(); // Kept as in original
+import logobeginPC from '@/assets/logobeginPC.mp4';
+import intopagedir from '@/assets/intopagedir.svg';
+
+const mobileFrames = import.meta.glob('@/assets/openvideo/*.jpg', { eager: true, as: 'url' });
+const tabletFrames = import.meta.glob('@/assets/openvideopad/*.jpg', { eager: true, as: 'url' });
 
 export default defineComponent({
   name: "HeaderVideo",
@@ -22,28 +26,32 @@ export default defineComponent({
       isLoading: true, // True while loading initial frames needed for playback
       loadingProgress: 0, // Progress for loading initial frames (0-100%)
       preloadedImages: [], // Array to store preloaded Image objects
+      logobeginPCpld: logobeginPCpld,
+      logobeginPC: logobeginPC,
+      intopagedir: intopagedir
     };
   },
   computed: {
     frames() {
       const arr = [];
       if (this.$isMobile.phone) {
-        // 手机模式：使用 props 提供的 basePath 和 framesCount
-        // basePath 默认为 '/openvideo/', framesCount 默认为 82
         for (let i = 0; i <= this.framesCount; i++) {
           const name = String(i).padStart(2, '0') + '.jpg';
-          arr.push(this.basePath + name);
+          const path = `/src/assets/openvideo/${name}`;
+          if (mobileFrames[path]) {
+            arr.push(mobileFrames[path]);
+          }
         }
       } else if (this.$isMobile.tablet) {
-        // 平板模式：使用指定的 basePath 和 framesCount
-        const tabletBasePath = '/openvideopad/';
         const tabletFramesCount = 90;
         for (let i = 0; i <= tabletFramesCount; i++) {
-          const name = String(i).padStart(2, '0') + '.jpg'; // Pad to 3 digits for tablet
+          const name = String(i).padStart(2, '0') + '.jpg';
-          arr.push(tabletBasePath + name);
+          const path = `/src/assets/openvideopad/${name}`;
+          if (tabletFrames[path]) {
+            arr.push(tabletFrames[path]);
+          }
         }
       }
-      // 对于桌面设备，arr 将为空，因为它们使用 <video> 标签
       return arr;
     },
     // Number of frames that need to be loaded before playback can start
@@ -249,12 +257,12 @@ export default defineComponent({
           :alt="alt"
           class="simple-frame-player"
       />
-      <video v-if="(!$isMobile.phone&&!$isMobile.tablet)" poster="/logobeginPCpld.png"
+      <video v-if="(!$isMobile.phone&&!$isMobile.tablet)" :poster="logobeginPCpld"
              id="pcstart" muted autoplay
              playsinline webkit-playsinline
              class="startvideo"
              x5-video-player-type="h5-page">
-        <source src="/logobeginPC.mp4" type="video/mp4"></source>
+        <source :src="logobeginPC" type="video/mp4"></source>
       </video>
     </div>
     <div id="beginbottom" v-if="false">
@@ -262,7 +270,7 @@ export default defineComponent({
         <div class="normalcontentdiv" id="intovideoreq">
         <span class="normalcontenttitle" id="intoa">
           <u>进入kdesign.top</u>
-          <img src="/intopagedir.svg" id="intopagesvg"/>
+          <img :src="intopagedir" id="intopagesvg"/>
         </span>
         </div>
       </a>

src/components/Homepage.vue

@@ -2,8 +2,20 @@
 import ExamplesContent from './ExamplesContent.vue'
 import Partners from './Tools/Partners.vue'
 import { useBootstrapBreakpoint } from './useBreakpoint.js';
+import bannervideopreload from "@/assets/bannervideopreload.png";
+import HpgVideo from "@/assets/HpgVideo.mp4";
+import kdesignblack from "@/assets/HomepageRes/kdesignblack.svg";
+import NewK from "@/assets/HomepageRes/NewK.png";
+import cptycx from "@/assets/HomepageRes/fwfw/cptycx.png";
+import ppty from "@/assets/HomepageRes/fwfw/ppty.png";
+import swdhcysj from "@/assets/HomepageRes/fwfw/swdhcysj.png";
+import qyszhzx from "@/assets/HomepageRes/fwfw/qyszhzx.png";
+import cytg from "@/assets/HomepageRes/fwfw/cytg.png";
+import ddx from "@/assets/HomepageRes/fwfw/2ddx.png";
+
 const { breakpoint } = useBootstrapBreakpoint();
 </script>
+
 <template>
   <div id="homepageroot" class="pageroot">
      <div id="homepagebanner" class="videorootbanner">
@@ -11,19 +23,19 @@ const { breakpoint } = useBootstrapBreakpoint();
 <!--         src="/bannervideopreload.png"-->
 <!--         class="videoimg"/>-->
       <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
-           poster="/bannervideopreload.png" controls=""
+             :poster="bannervideopreload" controls=""
              id="bannervideo" muted autoplay="autoplay" loop="loop"
              playsinline webkit-playsinline
              class="bannervideos"
              x5-video-player-type="h5-page">
-      <source src="/HpgVideo.mp4" type="video/mp4"></source>
+        <source :src="HpgVideo" type="video/mp4"></source>
       </video>
-    <video v-else poster="/bannervideopreload.png"
+      <video v-else :poster="bannervideopreload"
              id="bannervideo" muted autoplay="autoplay" loop="loop"
              playsinline webkit-playsinline
              class="bannervideos"
              x5-video-player-type="h5-page">
-      <source src="/HpgVideo.mp4" type="video/mp4"></source>
+        <source :src="HpgVideo" type="video/mp4"></source>
       </video>
       <div id="hpbanner" class="bannerovervideo">
         <div class="bannercontent">
@@ -43,7 +55,7 @@ const { breakpoint } = useBootstrapBreakpoint();
   <div id="secondwhite" class="pageroot">
     <div id="whiteK" class="normalcontentdiv">
       <span class="normalcontenttitle">
-        <img src="/HomepageRes/kdesignblack.svg" id="logoblack"/>
+        <img :src="kdesignblack" id="logoblack"/>
       </span>
       <span class="normalcontenttext">
         一家涵盖<b>品牌创新/产品设计/新媒体制作</b>的一站式综合服务体<br />我们致力于聚焦数字时代的人文体验，整合各领域专业与优势，构建用户与产品/品牌的新型关系
@@ -51,11 +63,11 @@ const { breakpoint } = useBootstrapBreakpoint();
     </div>
     <div id="bigKlogomobile" v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'||breakpoint==='lg'">
       <div id="bigKlogo">
-        <img src="/HomepageRes/NewK.png" width="100%" height="100%"/>
+        <img :src="NewK" width="100%" height="100%"/>
       </div>
     </div>
     <div id="bigKlogo" v-else>
-      <img src="/HomepageRes/NewK.png" width="100%" height="100%"/>
+      <img :src="NewK" width="100%" height="100%"/>
     </div>
   </div>
   <div class="pageroot" id="fwfw" style="background-color: black;">
@@ -70,7 +82,7 @@ const { breakpoint } = useBootstrapBreakpoint();
     <div id="fwfwlogos">
       <div class="fwfwlogodiv" id="fwfwlogo01">
         <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/cptycx.png"/>
+          <img :src="cptycx"/>
         </div>
         <div class="fwfwitemcontent">
           <span class="fwfwitemcn">
@@ -83,7 +95,7 @@ const { breakpoint } = useBootstrapBreakpoint();
       </div>
       <div class="fwfwlogodiv" id="fwfwlogo02">
         <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/ppty.png"/>
+          <img :src="ppty"/>
         </div>
         <div class="fwfwitemcontent">
           <span class="fwfwitemcn">
@@ -96,7 +108,7 @@ const { breakpoint } = useBootstrapBreakpoint();
       </div>
       <div class="fwfwlogodiv" id="fwfwlogo03">
         <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/swdhcysj.png"/>
+          <img :src="swdhcysj"/>
         </div>
         <div class="fwfwitemcontent">
           <span class="fwfwitemcn">
@@ -109,7 +121,7 @@ const { breakpoint } = useBootstrapBreakpoint();
       </div>
       <div class="fwfwlogodiv" id="fwfwlogo04">
         <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/qyszhzx.png"/>
+          <img :src="qyszhzx"/>
         </div>
         <div class="fwfwitemcontent">
           <span class="fwfwitemcn">
@@ -122,7 +134,7 @@ const { breakpoint } = useBootstrapBreakpoint();
       </div>
       <div class="fwfwlogodiv" id="fwfwlogo05">
         <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/cytg.png"/>
+          <img :src="cytg"/>
         </div>
         <div class="fwfwitemcontent">
           <span class="fwfwitemcn">
@@ -135,7 +147,7 @@ const { breakpoint } = useBootstrapBreakpoint();
       </div>
       <div class="fwfwlogodiv" id="fwfwlogo06">
         <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/2ddx.png"/>
+          <img :src="ddx"/>
         </div>
         <div class="fwfwitemcontent">
           <span class="fwfwitemcn">

src/components/ServiceProcess.vue

@@ -1,12 +1,17 @@
 <script setup>
 import { useBootstrapBreakpoint } from './useBreakpoint.js';
+import Newbanner from '@/assets/ServiceProcessRes/Newbanner.png';
+import designopinionwep from '@/assets/ServiceProcessRes/designopinionwep.png';
+import designopinion from '@/assets/ServiceProcessRes/designopinion.png';
+import designprocedurewep from '@/assets/ServiceProcessRes/designprocedurewep.png';
+import designprocedure from '@/assets/ServiceProcessRes/designprocedure.png';
 const { breakpoint } = useBootstrapBreakpoint();
 </script>
 
 <template>
   <div class="pageroot" id="serviceprocessroot">
     <div id="serviceprocessbanner" class="videorootbanner">
-      <img class="videoimg" src="/ServiceProcessRes/Newbanner.png"/>
+      <img class="videoimg" :src="Newbanner"/>
       <div id="expbanner" class="bannerovervideo">
         <div class="bannercontent">
           <span class="banner1">以体验设计重构用户关系<br /></span>
@@ -30,7 +35,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                   margin-top: 20px;
                   margin-bottom: 41px;
                   max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designopinionwep.png"
+        <img :src="designopinionwep"
              width="100%" height="100%"/>
       </div>
       <div v-if="breakpoint==='md'||breakpoint==='lg'"
@@ -39,7 +44,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                   margin-top: 79px;
                   margin-bottom: 95px;
                   max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designopinion.png"
+        <img :src="designopinion"
              width="100%" height="100%"/>
       </div>
       <div v-if="breakpoint==='xl'||breakpoint==='xxl'"
@@ -48,7 +53,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                   margin-top: 79px;
                   margin-bottom: 95px;
                   max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designopinion.png"
+        <img :src="designopinion"
              width="100%" height="100%"/>
       </div>
     </div>
@@ -64,7 +69,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                   margin-top: 20px;
                   margin-bottom: 41px;
                   max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designprocedurewep.png"
+        <img :src="designprocedurewep"
              width="100%" height="100%"/>
       </div>
       <div v-if="breakpoint==='md'||breakpoint==='lg'"
@@ -73,7 +78,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                   margin-top: 121px;
                   margin-bottom: 95px;
                   max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designprocedure.png"
+        <img :src="designprocedure"
              width="100%" height="100%"/>
       </div>
       <div v-if="breakpoint==='xl'||breakpoint==='xxl'"
@@ -82,7 +87,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                   margin-top: 121px;
                   margin-bottom: 95px;
                   max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designprocedure.png"
+        <img :src="designprocedure"
              width="100%" height="100%"/>
       </div>
     </div>
@@ -108,11 +113,11 @@ export default {
   width:100%;
   background-size: 100% 100%;
   @include media-breakpoint-between(xs, md) {
-    background-image: url('/ServiceProcessRes/blackbgwep.png');
+    background-image: url('@/assets/ServiceProcessRes/blackbgwep.png');
   }
 
   @include media-breakpoint-up(md) {
-    background-image: url('/ServiceProcessRes/blackbgpc.png');
+    background-image: url('@/assets/ServiceProcessRes/blackbgpc.png');
   }
 }
 

src/components/Toolbar.vue

@@ -2,56 +2,52 @@
   <div id="toproot">
     <MobileToolbar></MobileToolbar>
     <div id="topbar">
-      <a href="/">
+      <router-link to="/">
         <img
             id="toplogo"
             referrerpolicy="no-referrer"
-            src="/KDESIGNlogo.svg"/>
+            :src="KDESIGNlogo"/>
-      </a>
+      </router-link>
       <img
           id="topcode"
           class="label_1"
           referrerpolicy="no-referrer"
-          src="/topcode.png"/>
+          :src="topcode"/>
       <a href="javascript:;" @click="show_weptoolbar">
         <img
             id="wepmenubutton"
             class="label_1"
             referrerpolicy="no-referrer"
-            src="/waptoptoolbarbutton.png"/>
+            :src="waptoptoolbarbutton"/>
       </a>
       <span id="rightcontent">
         <span class="toptext" id="hyal"
               :class="{
                 curpagetoptext: this.isActiveRoute('Examples')}">
-          <a href="/Examples"
+          <router-link to="/Examples">
-             style="text-decoration: none; color: inherit;">
             行业案例
-          </a>
+          </router-link>
         </span>
         <span class="toptext" id="fwlc"
               :class="{
                 curpagetoptext: this.isActiveRoute('ServiceProcess')}">
-          <a href="/ServiceProcess"
+          <router-link to="/ServiceProcess">
-             style="text-decoration: none; color: inherit;">
             服务流程
-          </a>
+          </router-link>
         </span>
         <span class="toptext" id="gywm"
               :class="{
                 curpagetoptext: this.isActiveRoute('Aboutus')}">
-          <a href="/Aboutus"
+          <router-link to="/Aboutus">
-             style="text-decoration: none; color: inherit;">
             关于我们
-          </a>
+          </router-link>
         </span>
         <span class="toptext" id="lxwm"
               :class="{
                 curpagetoptext: this.isActiveRoute('ContactUs')}">
-          <a href="/ContactUs"
+          <router-link to="/ContactUs">
-             style="text-decoration: none; color: inherit;">
             联系我们
-          </a>
+          </router-link>
         </span>
       </span>
     </div>
@@ -60,11 +56,21 @@
 
 <script>
 import MobileToolbar from "./Tools/MobileToolbar.vue";
+import KDESIGNlogo from "@/assets/toolbar/KDESIGNlogo.svg";
+import topcode from "@/assets/toolbar/topcode.png";
+import waptoptoolbarbutton from "@/assets/toolbar/waptoptoolbarbutton.png";
 export default {
   name: "Toolbar",
   components: {
     MobileToolbar
   },
+  data() {
+    return {
+      KDESIGNlogo,
+      topcode,
+      waptoptoolbarbutton
+    };
+  },
   mounted() {
     this.$nextTick(function() {
       this.contain_toolbar();
@@ -113,11 +119,14 @@ export default {
 @import "node_modules/bootstrap/scss/_variables.scss";
 @import "node_modules/bootstrap/scss/_mixins.scss";
 
-.toptext
+.toptext {
-{
   @include media-breakpoint-between(xs, md) {
   }
   @include media-breakpoint-up(md){
+    a, .router-link-active {
+      text-decoration: none;
+      color: inherit;
+    }
     width: 99px;
     height: 28px;
     overflow-wrap: break-word;

src/components/Tools/FooterContent.vue

@@ -9,13 +9,13 @@
         <br/>
         <div style="display: flex; flex-direction: row;">
           <div class="qritem">
-            <img src="/bottom/qrwecom01.png" class="qrcodeimg">
+            <img :src="qrwecom01" class="qrcodeimg">
             <span class="itemcontent">
                 项目经理
               </span>
           </div>
           <div class="qritem" style="margin-right: 0px;margin-left: auto;">
-            <img src="/bottom/qrwecom02.png" class="qrcodeimg">
+            <img :src="qrwecom02" class="qrcodeimg">
             <span class="itemcontent">
                 商务经理
               </span>
@@ -26,7 +26,7 @@
         <span class="itemtitle">WECHAT / 公众号</span>
         <div style="display: flex; flex-direction: row;">
           <div class="qritem" id="wechatpublic">
-            <img src="/bottom/qrwecom03.png" class="qrcodeimg">
+            <img :src="qrwecom03" class="qrcodeimg">
             <span class="itemcontent">
               K DESIGN Lab
             </span>
@@ -60,8 +60,18 @@
 </template>
 
 <script>
+import qrwecom01 from "@/assets/bottom/qrwecom01.png";
+import qrwecom02 from "@/assets/bottom/qrwecom02.png";
+import qrwecom03 from "@/assets/bottom/qrwecom03.png";
 export default {
-  name: "FooterContent"
+  name: "FooterContent",
+  data() {
+    return {
+      qrwecom01,
+      qrwecom02,
+      qrwecom03
+    };
+  }
 }
 </script>
 

src/components/Tools/MobileToolbar.vue

@@ -1,5 +1,7 @@
 <script setup>
 import FooterContent from './FooterContent.vue'
+import weptoolbarlogo from "@/assets/MobileToolbar/weptoolbarlogo.png";
+import closeweptoolbar from "@/assets/MobileToolbar/closeweptoolbar.png";
 </script>
 
 <template>
@@ -10,7 +12,7 @@ import FooterContent from './FooterContent.vue'
           <img
               id="image_1"
               referrerpolicy="no-referrer"
-              src="/MobileToolbar/weptoolbarlogo.png"
+              :src="weptoolbarlogo"
           />
         </a>
         <span style="width: 100%;"></span>
@@ -18,7 +20,7 @@ import FooterContent from './FooterContent.vue'
           <img
               id="thumbnail_1"
               referrerpolicy="no-referrer"
-              src="/MobileToolbar/closeweptoolbar.png"
+              :src="closeweptoolbar"
           />
         </a>
       </div>

src/router.js

@@ -62,7 +62,7 @@ const routes= [
 ]
 
 const router = createRouter({
-    history: createWebHistory(),
+    history: createWebHistory('/'),
     routes,
     scrollBehavior(to, from, savedPosition) {
         // 如果有保存的滚动位置 (例如，当用户点击浏览器的后退/前进按钮时)，则恢复该位置

vite.config.js

@@ -4,6 +4,7 @@ import { fileURLToPath, URL } from 'node:url'
 import fs from 'fs'
 
 export default defineConfig({
+  base: process.env.NODE_ENV === 'production' ? 'https://cdn.kdesign.top/' : '/',
   plugins: [
     vue(),
     // 添加自定义中间件来处理根路径