fix: 更新依赖版本并修复路由历史模式

xuhongbin · xuhongbin · commit 1224a4f8f7e2 · 2025-09-05T17:58:25.000+08:00
refactor: 调整App.vue布局和样式
style: 优化Count.vue按钮样式
chore: 移除调试脚本并关闭自动打开浏览器
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/vue3-host/emp.config.ts b/projects/vue3-host/emp.config.ts
@@ -3,9 +3,9 @@ import Vue3 from '@empjs/plugin-vue3'
 import {externalVue, pluginRspackEmpShare} from '@empjs/share'
 import pkg from './package.json'
 
-const vueVersion = pkg.dependencies.vue
-const vueRouterVersion = pkg.dependencies['vue-router']
-const piniaVersion = pkg.dependencies.pinia
+const vueVersion = pkg.dependencies.vue.replace('^', '')
+const vueRouterVersion = pkg.dependencies['vue-router'].replace('^', '')
+const piniaVersion = pkg.dependencies.pinia.replace('^', '')
 export default defineConfig(store => {
   return {
     defineFix: 'all',
@@ -47,7 +47,7 @@ export default defineConfig(store => {
       //   name: 'vue3Project',
       // }),
     ],
-    server: {port: 9901},
+    server: {port: 9901,open:false},
     html: {
       title: 'Vue3 Host',
       template: 'src/setup/index.html',
diff --git a/projects/vue3-host/package.json b/projects/vue3-host/package.json
@@ -11,8 +11,8 @@
   "dependencies": {
     "@empjs/share": "workspace:^",
     "pinia": "^3.0.3",
-    "vue": "3.5.21",
-    "vue-router": "4.5.1"
+    "vue": "^3.5.21",
+    "vue-router": "^4.5.1"
   },
   "scripts": {
     "dev": "emp dev",
diff --git a/projects/vue3-host/src/components/App.vue b/projects/vue3-host/src/components/App.vue
@@ -9,13 +9,13 @@
     </div>
 
   </div>
-  <p>
-    <strong>Current route path:</strong> {{ $route.fullPath }}
-  </p>
   <nav>
-    <RouterLink to="/">Go to home</RouterLink> |
+    <RouterLink to="/">Go to home</RouterLink> /
     <RouterLink to="/info">Go to info</RouterLink>
   </nav>
+  <p>
+    <strong>Current route path:</strong> {{ $route.fullPath }}
+  </p>
   <main>
     <RouterView />
   </main>
@@ -41,7 +41,7 @@ h1 {
 }
 
 .logo {
-  width: 80px;
+  height: 60px;
 }
 
 .header {
diff --git a/projects/vue3-host/src/components/Count.vue b/projects/vue3-host/src/components/Count.vue
@@ -1,6 +1,6 @@
 <template>
-    <h3>count: {{ count }}</h3>
-    <button v-on:click="counterStore.increment">You clicked me {{ count }} times.</button>
+    <h3>count: <b>{{ count }}</b></h3>
+    <button class="button" v-on:click="counterStore.increment">Clicked Me</button>
 </template>
 
 <script setup lang="ts">
@@ -9,4 +9,23 @@ import { useCounterStore } from './countStore'
 
 const counterStore = useCounterStore()
 const { count } = storeToRefs(counterStore)
-</script>
+</script>
+
+<style lang="css" scoped>
+h3 b {
+    font-size: 36px;
+}
+
+.button {
+    background-color: #04AA6D;
+    /* Green */
+    border: none;
+    color: white;
+    padding: 8px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    border-radius: 8px;
+}
+</style>
diff --git a/projects/vue3-host/src/setup/index.html b/projects/vue3-host/src/setup/index.html
@@ -4,7 +4,7 @@
 <head>
   <title></title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="https://yo-debug-test.yy.com/target.js"></script>
+  <!-- <script src="https://yo-debug-test.yy.com/target.js"></script> -->
   <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->
   <!-- <script>eruda.init();</script> -->
 </head>
diff --git a/projects/vue3-host/src/setup/router.ts b/projects/vue3-host/src/setup/router.ts
@@ -1,11 +1,12 @@
-import {createRouter, createWebHashHistory} from 'vue-router'
+import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
 
 const routes = [
   {path: '/', name: 'home', component: () => import('src/components/Home.vue')},
   {path: '/info', name: 'info', component: () => import('src/components/Info.vue')},
 ]
 
 export const router = createRouter({
-  history: createWebHashHistory(),
+  // history: createWebHashHistory(),
+  history: createWebHistory(),
   routes,
 })
