多语言

package.json

@@ -11,11 +11,12 @@
   "dependencies": {
     "@kagol/vue-carousel": "^0.1.2",
     "@unhead/vue": "^2.1.15",
-    "unhead": "2.1.15",
     "gsap": "^3.15.0",
     "less": "^4.6.4",
+    "unhead": "2.1.15",
     "vite-ssg": "^28.3.0",
     "vue": "^3.5.34",
+    "vue-i18n": "^11.4.4",
     "vue-router": "^4.6.4"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       vue:
         specifier: ^3.5.34
         version: 3.5.34(typescript@6.0.3)
+      vue-i18n:
+        specifier: ^11.4.4
+        version: 11.4.4(vue@3.5.34(typescript@6.0.3))
       vue-router:
         specifier: ^4.6.4
         version: 4.6.4(vue@3.5.34(typescript@6.0.3))
@@ -149,6 +152,22 @@ packages:
       '@noble/hashes':
         optional: true
 
+  '@intlify/core-base@11.4.4':
+    resolution: {integrity: sha512-w/vItlylrAmhebkIbVl5YY8XMCtj8Mb2g70ttxktMYuf5AuRahgEHL2iLgLIsZBIbTSgs4hkUo7ucCL0uTJvOg==}
+    engines: {node: '>= 22'}
+
+  '@intlify/devtools-types@11.4.4':
+    resolution: {integrity: sha512-PcBLmGmDQsTSVV911P8upzpcLJO1CNVYi/IH6bGnLR2nA+0L963+kXN1ZrisTEnbtw2ewN6HMMSldqzjronA0Q==}
+    engines: {node: '>= 22'}
+
+  '@intlify/message-compiler@11.4.4':
+    resolution: {integrity: sha512-vn0OAV9pYkJlPPmgnsSm5eAG3mL0+9C/oaded2JY9jmxBbhmUXT3TcAUY8WRgLY9Hte7lkUJKpXrVlYjMXBD2w==}
+    engines: {node: '>= 22'}
+
+  '@intlify/shared@11.4.4':
+    resolution: {integrity: sha512-QRUCHqda1U6aR14FR0vvXD4+4gj6+fm0AhAozvSuRCw0fCvrmCugWpgiR4xH2NI6s8am6N9p5OhirplsX8ZS3g==}
+    engines: {node: '>= 22'}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -212,36 +231,42 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0':
     resolution: {integrity: sha512-EIVjy2cgd7uuMMo94FVkBp7F6DhcZAUwNURkSG3RwUmvAXR6s0ISxM81U+IydcZByPG0pZIHsf1b6kTxoFDgJA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-linux-ppc64-gnu@1.0.0':
     resolution: {integrity: sha512-JEwwOPcwTLAcpDQlqSmjEmfs63xJnSiUNIGvLcDLUHCWK4XowpS/7c7tUsUH6uT/ct6bMUTdXKfI8967FYj6mg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-s390x-gnu@1.0.0':
     resolution: {integrity: sha512-0wjCFhLrihtAubnT9iA0N++0pSV0z5Hg7tNGdNJ4RFaINceHadoF+kiFGyY1qSSNVIAZtLotG8Ju1bgDPkjnFA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0':
     resolution: {integrity: sha512-Dfn7iak9BcMMePxcoJfpSbWqnEyrp/dRF63/8qW/eHBdOZov6x5aShLLEYGYdIeSJ6vMLK/XCVB+lGIxm41bQA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0':
     resolution: {integrity: sha512-5/utzzDmD/pD/bmuaUcbTf/sZYy0aztwIVlfpoW1fTjCZ0BaPOMVWGZL1zvgxyi7ZIVYWlxKONHmSbHuiOh8Jw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0':
     resolution: {integrity: sha512-ouJs8VcUomfLfpbUECqFMRqdV4x6aeAK3MA4m6vTrJJjKyWTV5KnxZx7Jd9G+GlDaQQxubcba00x16OyJ1meig==}
@@ -281,6 +306,7 @@ packages:
     resolution: {integrity: sha512-9Q7DGjZN+hTdJomaQ3Iub4m6VPu1r94bmK2z3UeWP3dGUecRC54tmVu9vKHTm1bOt3ASoYtEz6JSRLFzrysKlA==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tybys/wasm-util@0.10.2':
     resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
@@ -565,24 +591,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.32.0:
     resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
@@ -830,6 +860,12 @@ packages:
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
+  vue-i18n@11.4.4:
+    resolution: {integrity: sha512-gIbXVSFQV4jcSJxfwdZ5zSZmZ+12CnX0K3vBkRSd6Zn+HSzCp+QwUgPwpD/uN0oKNKI9RzlUXPKVedEuMgNG0A==}
+    engines: {node: '>= 22'}
+    peerDependencies:
+      vue: ^3.0.0
+
   vue-router@4.6.4:
     resolution: {integrity: sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==}
     peerDependencies:
@@ -958,6 +994,24 @@ snapshots:
 
   '@exodus/bytes@1.15.0': {}
 
+  '@intlify/core-base@11.4.4':
+    dependencies:
+      '@intlify/devtools-types': 11.4.4
+      '@intlify/message-compiler': 11.4.4
+      '@intlify/shared': 11.4.4
+
+  '@intlify/devtools-types@11.4.4':
+    dependencies:
+      '@intlify/core-base': 11.4.4
+      '@intlify/shared': 11.4.4
+
+  '@intlify/message-compiler@11.4.4':
+    dependencies:
+      '@intlify/shared': 11.4.4
+      source-map-js: 1.2.1
+
+  '@intlify/shared@11.4.4': {}
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -1589,6 +1643,14 @@ snapshots:
 
   vscode-uri@3.1.0: {}
 
+  vue-i18n@11.4.4(vue@3.5.34(typescript@6.0.3)):
+    dependencies:
+      '@intlify/core-base': 11.4.4
+      '@intlify/devtools-types': 11.4.4
+      '@intlify/shared': 11.4.4
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.34(typescript@6.0.3)
+
   vue-router@4.6.4(vue@3.5.34(typescript@6.0.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4

src/components/main-header.vue

@@ -5,20 +5,25 @@
 			<div class="nav-item" v-for="item in navList" :key="item.name">
 				<down-menu :title="item.name" v-if="item.children">
 					<router-link :to="child.path" v-for="child in item.children" :key="child.path">
-						{{ child.name }}
+						{{ $t(child.name) }}
 					</router-link>
 				</down-menu>
 				<router-link class="link hover-bottom-animation" :to="item.path" v-else>
-					{{ item.name }}
+					{{ $t(item.name) }}
 					<span v-show="item.children" class="iconfont icon-arrow-down-bold"></span>
 				</router-link>
 			</div>
 		</div>
 		<div class="right">
-			<down-menu title="English">
+			<down-menu :title="langList.find((v) => v.value === locale)?.label || 'English'">
-				<router-link class="link" to="/">English</router-link>
+				<router-link
-				<router-link class="link" to="/zh-cn">简体中文</router-link>
+					class="link"
-				<router-link class="link" to="/zh-tw">繁體中文</router-link>
+					:to="`/${item.value}`"
+					v-for="item in langList"
+					:key="item.value"
+				>
+					{{ item.label }}
+				</router-link>
 			</down-menu>
 			<span class="">
 				<span class="iconfont icon-wode"></span>
@@ -28,16 +33,36 @@
 	</header>
 </template>
 <script setup lang="ts">
-	import { ref, onMounted, onUnmounted, computed } from 'vue'
+	import { ref, watch, computed } from 'vue'
 	import DownMenu from './down-menu.vue'
-
+	import { setLang, LangType } from '../lang'
+	import { useI18n } from 'vue-i18n'
+	const { locale } = useI18n()
 	import { useRoute } from 'vue-router'
 	const route = useRoute()
-	console.log(route)
+	const lang = computed(() => route.params.lang)
+	if (lang.value) setLang(lang.value)
+	watch(lang, (newVal) => {
+		setLang(newVal)
+	})
+	const langList = ref([
+		{
+			label: 'English',
+			value: LangType.en
+		},
+		{
+			label: '简体中文',
+			value: LangType.zhCn
+		},
+		{
+			label: '繁體中文',
+			value: LangType.zhTw
+		}
+	])
 
 	const navList = ref([
 		{
-			name: 'Home',
+			name: 'MainHeader.Home',
 			path: '/'
 		},
 		{

src/lang/en.ts

@@ -0,0 +1,5 @@
+export default {
+	MainHeader: {
+		Home: 'Home',
+	}
+}

src/lang/index.ts

@@ -0,0 +1,40 @@
+import { createI18n } from 'vue-i18n'
+
+import enLocale from './en.ts'
+import zhCnLocale from './zh-cn.ts'
+import zhTwLocale from './zh-tw.ts'
+
+export const LangType = {
+	en: "en",		// 英文
+	zhTw: "zh-tw",	// 繁体中文
+	zhCn: "zh-cn",	// 简体中文
+}
+export const LANGS = Object.values(LangType)
+
+// 语言配置整合
+const messages = {
+	[LangType.en]: enLocale,
+	[LangType.zhCn]: zhCnLocale,
+	[LangType.zhTw]: zhTwLocale,
+}
+const localeLang = localStorage.getItem('language')
+const defaultLocale = checkLocale(localeLang) ? localeLang! : LangType.en
+// 创建 i18n
+const i18n = createI18n({
+	legacy: false,
+	globalInjection: true,  // 全局模式，可以直接使用 $t
+	locale: defaultLocale,
+	messages: messages
+})
+export default i18n
+// 检查语言是否存在
+function checkLocale(lang: any) {
+	return LANGS.includes(lang)
+}
+export const setLang = (lang: any) => {
+	if (lang === "") lang = LangType.en
+	if (!checkLocale(lang)) return false
+	i18n.global.locale.value = lang
+	localStorage.setItem('language', lang)
+	return true
+}

src/lang/zh-cn.ts

@@ -0,0 +1,5 @@
+export default {
+	MainHeader: {
+		Home: '首页',
+	}
+}

src/lang/zh-tw.ts

@@ -0,0 +1,5 @@
+export default {
+	MainHeader: {
+		Home: '首頁',
+	}
+}

src/main.ts

@@ -4,13 +4,15 @@ import { routes } from './routes'
 // import './style.css'
 import '@/assets/css/style.less'
 import directives from './directives/index'
+import i18n from './lang/index'
 
 export const createApp = ViteSSG(App, {
 	routes,
 	base: import.meta.env.BASE_URL,
-	},
+},
 	({ app }) => {
 		// 注册全局指令
 		app.use(directives)
+		app.use(i18n)
 	}
 )

src/routes.ts

@@ -3,10 +3,10 @@ import AboutView from './pages/about-us/index.vue'
 import ContactView from './pages/ContactView.vue'
 import HomeView from './pages/home/index.vue'
 import ProductsView from './pages/ProductsView.vue'
-
+import { LANGS } from './lang'
 export const routes: RouteRecordRaw[] = [
 	{
-		path: '/:lang(en|zh-cn|zh-tw)?',
+		path: `/:lang(${LANGS.join('|')})?`,
 		children: [
 			{
 				path: '',