build: 设置多语言

src/App.vue

@@ -1,17 +1,26 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
   <div>sss</div>
   <div v:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"> sssss </div>
   <img alt="Vue logo" src="./assets/logo.png" />
   <div>sss</div>
   <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+  <div>{{ t('test.about') }}</div>
+  <div>{{ t('test2.go') }}</div>
+  <button @click="change">切换语言</button>
 </template>
 
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+import HelloWorld from './components/HelloWorld.vue'
+const { t, availableLocales, locale } = useI18n()
+
+function change() {
+  const locales = availableLocales
+  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+}
+</script>
+
 <style scoped>
 #app {
   margin-top: 60px;

src/locales/en.ts

@@ -0,0 +1,8 @@
+export default {
+  test: {
+    about: 'About'
+  },
+  test2: {
+    go: 'Go'
+  }
+}

src/locales/zh-CN.ts

@@ -0,0 +1,8 @@
+export default {
+  test: {
+    about: '关于'
+  },
+  test2: {
+    go: '去'
+  }
+}

src/main.ts

@@ -1,8 +1,14 @@
 import { createApp } from 'vue'
+
 import App from './App.vue'
 
-import 'virtual:windi.css'
+const app = createApp(App)
 
-import 'virtual:windi-devtools'
+// 引入windi css
+import '@/plugins/windicss'
 
-createApp(App).mount('#app')
+// 引入多语言
+import { setupI18n } from '@/plugins/i18n'
+setupI18n(app)
+
+app.mount('#app')

src/plugins/i18n/index.ts

@@ -0,0 +1,17 @@
+import { createI18n } from 'vue-i18n'
+import type { App } from 'vue'
+
+const messages = Object.fromEntries(
+  Object.entries(import.meta.globEager('../../locales/*.ts')).map(([key, value]) => {
+    return [key.slice(14, -3), value.default]
+  })
+)
+
+export function setupI18n(app: App<Element>): void {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'zh-CN',
+    messages
+  })
+  app.use(i18n)
+}

src/plugins/windicss/index.ts

@@ -0,0 +1,3 @@
+import 'virtual:windi.css'
+
+import 'virtual:windi-devtools'