efats

src/App.vue

@@ -9,5 +9,7 @@ body,
   height: 100%;
   padding: 0;
   margin: 0;
+  /* background: #7CD2FF; */
+  background-image: linear-gradient(0deg, #7CD2FF 0, #7CD2FF 50%, #8AC9F3)
 }
 </style>

src/OverPage.vue → src/pages/OverPage.vue

@@ -21,15 +21,15 @@
 </template>
 
 <script>
-import { ref, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import overImage from './assets/TipsImage/3-4.png'
-import winTopImage from './assets/RoundaboutImage/2-11.png'
-import loseTopImage from './assets/RoundaboutImage/2-12.png'
-import tryAgain from './assets/ButtonImage/再玩一次.png'
-import goShare from './assets/ButtonImage/和好友一起玩.png'
-import goTop from './assets/ButtonImage/排行榜.png'
+import overImage from '@/assets/TipsImage/3-4.png'
+import winTopImage from '@/assets/RoundaboutImage/2-11.png'
+import loseTopImage from '@/assets/RoundaboutImage/2-12.png'
+import tryAgain from '@/assets/ButtonImage/再玩一次.png'
+import goShare from '@/assets/ButtonImage/和好友一起玩.png'
+import goTop from '@/assets/ButtonImage/排行榜.png'
+
 export default {
   setup() {
     const route = useRoute() //跳转

src/TopRulePage.vue → src/pages/TopRulePage.vue

@@ -31,12 +31,12 @@
 
 <script>
 import { useRoute, useRouter } from 'vue-router'
-import ruleImage from './assets/TipsImage/3-3.png'
-import IKnow from './assets/ButtonImage/我知道了.png'
 import { onMounted } from 'vue'
+import ruleImage from '@/assets/TipsImage/3-3.png'
+import IKnow from '@/assets/ButtonImage/我知道了.png'
+import TopImage from '@/assets/TipsImage/3-2.png'
+import GoHome from '@/assets/ButtonImage/返回首页.png'
 
-import TopImage from './assets/TipsImage/3-2.png'
-import GoHome from './assets/ButtonImage/返回首页.png'
 export default {
   setup() {
     const route = useRoute()

src/game.js → src/pages/game/game.js

@@ -2,20 +2,20 @@ import Two from "two.js";
 
 const colorList = ['#f5222d', '#d4380d', '#d46b08', '#d48806', '#d4b106', '#7cb305', '#389e0d', '#08979c', '#096dd9', '#531dab']
 
-import backImage from './assets/BackImage/framebg.jpg'
-import wheelImage from './assets/RoundaboutImage/2-09.png';
-import cageImage from './assets/RoundaboutImage/2-13.png';
-import pedestalImage from './assets/RoundaboutImage/2-14.png'
-import countImage from './assets/RoundaboutImage/计数.png'
-import ropeImage1 from './assets/RoundaboutImage/2-15.png'
-import ropeImage2 from './assets/RoundaboutImage/2-16.png'
-import ropeImage3 from './assets/RoundaboutImage/2-17.png'
-import ropeImage4 from './assets/RoundaboutImage/2-18.png'
-import ropeImage5 from './assets/RoundaboutImage/2-19.png'
-import ropeImage6 from './assets/RoundaboutImage/2-20.png'
-import ropeImage7 from './assets/RoundaboutImage/2-21.png'
-import ropeImage8 from './assets/RoundaboutImage/2-22.png'
-import ropeImage9 from './assets/RoundaboutImage/2-23.png'
+import backImage from '@/assets/BackImage/framebg.jpg'
+import wheelImage from '@/assets/RoundaboutImage/2-09.png';
+import cageImage from '@/assets/RoundaboutImage/2-13.png';
+import pedestalImage from '@/assets/RoundaboutImage/2-14.png'
+import countImage from '@/assets/RoundaboutImage/计数.png'
+import ropeImage1 from '@/assets/RoundaboutImage/2-15.png'
+import ropeImage2 from '@/assets/RoundaboutImage/2-16.png'
+import ropeImage3 from '@/assets/RoundaboutImage/2-17.png'
+import ropeImage4 from '@/assets/RoundaboutImage/2-18.png'
+import ropeImage5 from '@/assets/RoundaboutImage/2-19.png'
+import ropeImage6 from '@/assets/RoundaboutImage/2-20.png'
+import ropeImage7 from '@/assets/RoundaboutImage/2-21.png'
+import ropeImage8 from '@/assets/RoundaboutImage/2-22.png'
+import ropeImage9 from '@/assets/RoundaboutImage/2-23.png'
 
 const designWidth = 640; // 设计稿宽度
 const desginRadius = 246; // 设计稿轮盘半径

src/Game.vue → src/pages/game/index.vue

@@ -6,8 +6,8 @@
 <script setup>
   import { onBeforeUnmount, onMounted, ref } from 'vue';
   import Two from "two.js";
-  import FireWorkListVue from './components/FireWorkList.vue';
-  import game from "./game";
+  import FireWorkListVue from '@/components/FireWorkList.vue';
+  import game from "./game.js";
 
   const el = ref()
   const destroyRef = ref()

src/homePage.vue → src/pages/homePage.vue

@@ -18,21 +18,15 @@
 
 <script >
 import { useRouter } from 'vue-router'
-import backHome from './assets/BackImage/backHome.jpg'
-import gameTitle from './assets/BackImage/首页大标.png'
+import backHome from '@/assets/BackImage/backHome.jpg'
+import gameTitle from '@/assets/BackImage/首页大标.png'
 
-import gameSatrt from './assets/ButtonImage/开始游戏.png'
-import gameRule from './assets/ButtonImage/游戏规则.png'
+import gameSatrt from '@/assets/ButtonImage/开始游戏.png'
+import gameRule from '@/assets/ButtonImage/游戏规则.png'
 
 export default {
   setup() {
     const router = useRouter()
-    const HomeStyle = {
-      backgroundImage:
-        'url(' + require('./assets/BackImage/backHome.jpg') + ')',
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: '100% auto'
-    }
 
     const linkTo = () => {
       // 字符串路径
@@ -61,7 +55,6 @@ export default {
     }
 
     return {
-      HomeStyle,
       linkTo,
       backHome,
       gameSatrt,

src/router/index.js

@@ -1,13 +1,18 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import homePage from '../homePage.vue'
-import OverPage from '../OverPage.vue'
-import TopRulePage from '../TopRulePage.vue'
+import homePage from '@/pages/homePage.vue'
+import OverPage from '@/pages/OverPage.vue'
+import TopRulePage from '@/pages/TopRulePage.vue'
+import GamePage from '@/pages/game'
 const routerHistory = createWebHistory()
 const routes = [
   {
     path: '/',
     component: homePage
   },
+  {
+    path: '/game',
+    component: GamePage
+  },
   {
     path: '/OverPage',
     component: OverPage

vue.config.js

@@ -1,4 +1,14 @@
 const { defineConfig } = require('@vue/cli-service')
+const path = require('path');
+
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  chainWebpack: (config)=>{
+    config.resolve.alias
+      .set('@', path.join(__dirname,'src'))
+      .set('@/components', path.join(__dirname,'src/components'))
+      .set('@/pages', path.join(__dirname,'src/pages'))
+      .set('@/assets', path.join(__dirname,'src/assets'))
+      .set('@/utils', path.join(__dirname,'src/utils'))
+  },
 })