aidlab/Code-Create
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

多语言

Browse Source
This commit is contained in:
李志鹏
2026-05-18 10:39:52 +08:00
parent 4587a59a89
commit f282adfd87
9 changed files with 161 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -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": {

62
pnpm-lock.yaml generated
View File

@@ -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

45
src/components/main-header.vue
View File

@@ -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: '/'
},
{

5
src/lang/en.ts Normal file
View File

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

40
src/lang/index.ts Normal file
View File

@@ -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
}

5
src/lang/zh-cn.ts Normal file
View File

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

5
src/lang/zh-tw.ts Normal file
View File

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

8
src/main.ts
View File

@@ -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)
}
)

4
src/routes.ts
View File

@@ -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: '',