feat: 修改静态资源的饿路径，适配服务器环境

src/config/trainSite.js

@@ -1,7 +1,7 @@
 // 训练列表
 // eslint-disable-next-line import/prefer-default-export
 export const TRAIN_SITE_LIST = [
-  { id: '1', name: 'UpperLimb', text: '上肢训练', order: 1, image: '/page2/UpperLimb.png' },
+  { id: '1', name: 'UpperLimb', text: '上肢训练', order: 1, image: 'page2/UpperLimb.png' },
-  { id: '2', name: 'Hand', text: '手部训练', order: 2, image: '/page2/Hand.png' },
+  { id: '2', name: 'Hand', text: '手部训练', order: 2, image: 'page2/Hand.png' },
-  { id: '3', name: 'LowerLimb', text: '下肢训练', order: 3, image: '/page2/LowerLimb.png' },
+  { id: '3', name: 'LowerLimb', text: '下肢训练', order: 3, image: 'page2/LowerLimb.png' },
 ];

src/views/GameList.vue

@@ -1,10 +1,5 @@
 <template>
-  <!--  <button @click="$router.back()">返回</button>-->
+  <div class="container" :style="{ 'background-image': `url(${base}${gameImage})` }">
-  <!--  游戏列表选择-->
-  <!--  <div v-for="item in games" :key="item.id" @click="openGame(item.name)">-->
-  <!--    {{ item.text }}-->
-  <!--  </div>-->
-  <div class="container" :style="{ 'background-image': `url(${gameImage})` }">
     <div class="back" @click="$router.back()"></div>
     <div class="btn btn-left" :class="{ disabled: page === 0 }" @click="handlePrev"></div>
     <div class="small-container">
@@ -14,7 +9,7 @@
         :key="item.id"
         @mouseover="mouseover(item.name)"
         @click="openGame(item.name)"
-        :style="{ 'background-image': `url(/page3/${item.name}.jpg)` }"
+        :style="{ 'background-image': `url(${base}page3/${item.name}.jpg)` }"
       ></div>
     </div>
     <div class="btn btn-right" :class="{ disabled: page === total - 1 }" @click="handleNext"></div>
@@ -28,8 +23,10 @@ import { computed, ref } from 'vue';
 // TODO: 训练部位的本地记录 或者 url记录
 
 const store = useStore();
+const base = import.meta.env.BASE_URL;
+
 const allGames = computed(() => store.getters.selectedGames); // 当前训练部位对应的游戏
-const gameImage = ref(`/page3/${allGames.value[0].name}.jpg`); // 大图背景
+const gameImage = ref(`page3/${allGames.value[0].name}.jpg`); // 大图背景
 const page = ref(0); // 第几页
 const size = 4;
 const count = computed(() => allGames.value.length); // 游戏个数

src/views/TrainSiteList.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <el-carousel :autoplay="false" indicator-position="none" type="card" class="content" :initial-index="activeIndex" @change="onChange">
       <el-carousel-item v-for="(item, i) in TRAIN_SITE_LIST" :key="item.id" @click="selectSite(item, i)">
-        <div class="train-image" :style="{ 'background-image': `url(${item.image})` }"></div>
+        <div class="train-image" :style="{ 'background-image': `url(${base}${item.image})` }"></div>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -17,6 +17,7 @@ import { ref } from 'vue';
 const store = useStore();
 const router = useRouter();
 
+const base = import.meta.env.BASE_URL;
 const activeIndex = ref(0);
 
 /**
@@ -27,7 +28,6 @@ function onChange(index) {
   activeIndex.value = index;
 }
 
-
 /**
  * 设置选中的训练部位名称存到store里
  * 跳转到游戏列表界面
@@ -84,9 +84,9 @@ function selectSite(site, i) {
   color: transparent;
 }
 .content :deep(.el-carousel__arrow--left) {
-  background-image: url("/page2/left.png");
+  background-image: url('/page2/left.png');
 }
 .content :deep(.el-carousel__arrow--right) {
-  background-image: url("/page2/right.png");
+  background-image: url('/page2/right.png');
 }
 </style>