多语言

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">
-				<router-link class="link" to="/">English</router-link>
-				<router-link class="link" to="/zh-cn">简体中文</router-link>
-				<router-link class="link" to="/zh-tw">繁體中文</router-link>
+			<down-menu :title="langList.find((v) => v.value === locale)?.label || 'English'">
+				<router-link
+					class="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,
-	},
+	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: '',