feat(i18n): 引入i18n，标题不生效，另外还有报错提示出现

.eslintrc.cjs

@@ -75,6 +75,7 @@ module.exports = {
     },
   },
   globals: {
+    $t: true,
     uni: true,
     UniApp: true,
     wx: true,

package.json

@@ -87,7 +87,7 @@
     "pinia": "2.0.36",
     "pinia-plugin-persistedstate": "3.2.1",
     "vue": "3.2.47",
-    "vue-i18n": "9.8.0"
+    "vue-i18n": "9.9.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",

pnpm-lock.yaml

@@ -59,8 +59,8 @@ dependencies:
     specifier: 3.2.47
     version: 3.2.47
   vue-i18n:
-    specifier: 9.8.0
+    specifier: 9.9.0
-    version: 9.8.0(vue@3.2.47)
+    version: 9.9.0(vue@3.2.47)
 
 devDependencies:
   '@commitlint/cli':
@@ -2731,12 +2731,12 @@ packages:
       '@intlify/shared': 9.1.9
       '@intlify/vue-devtools': 9.1.9
 
-  /@intlify/core-base@9.8.0:
+  /@intlify/core-base@9.9.0:
-    resolution: {integrity: sha512-UxaSZVZ1DwqC/CltUZrWZNaWNhfmKtfyV4BJSt/Zt4Or/fZs1iFj0B+OekYk1+MRHfIOe3+x00uXGQI4PbO/9g==}
+    resolution: {integrity: sha512-C7UXPymDIOlMGSNjAhNLtKgzITc/8BjINK5gNKXg8GiWCTwL6n3MWr55czksxn8RM5wTMz0qcLOFT+adtaVQaA==}
     engines: {node: '>= 16'}
     dependencies:
-      '@intlify/message-compiler': 9.8.0
+      '@intlify/message-compiler': 9.9.0
-      '@intlify/shared': 9.8.0
+      '@intlify/shared': 9.9.0
     dev: false
 
   /@intlify/devtools-if@9.1.9:
@@ -2753,11 +2753,11 @@ packages:
       '@intlify/shared': 9.1.9
       source-map: 0.6.1
 
-  /@intlify/message-compiler@9.8.0:
+  /@intlify/message-compiler@9.9.0:
-    resolution: {integrity: sha512-McnYWhcoYmDJvssVu6QGR0shqlkJuL1HHdi5lK7fNqvQqRYaQ4lSLjYmZxwc8tRNMdIe9/KUKfyPxU9M6yCtNQ==}
+    resolution: {integrity: sha512-yDU/jdUm9KuhEzYfS+wuyja209yXgdl1XFhMlKtXEgSFTxz4COZQCRXXbbH8JrAjMsaJ7bdoPSLsKlY6mXG2iA==}
     engines: {node: '>= 16'}
     dependencies:
-      '@intlify/shared': 9.8.0
+      '@intlify/shared': 9.9.0
       source-map-js: 1.0.2
     dev: false
 
@@ -2777,8 +2777,8 @@ packages:
     resolution: {integrity: sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==}
     engines: {node: '>= 10'}
 
-  /@intlify/shared@9.8.0:
+  /@intlify/shared@9.9.0:
-    resolution: {integrity: sha512-TmgR0RCLjzrSo+W3wT0ALf9851iFMlVI9EYNGeWvZFUQTAJx0bvfsMlPdgVtV1tDNRiAfhkFsMKu6jtUY1ZLKQ==}
+    resolution: {integrity: sha512-1ECUyAHRrzOJbOizyGufYP2yukqGrWXtkmTu4PcswVnWbkcjzk3YQGmJ0bLkM7JZ0ZYAaohLGdYvBYnTOGYJ9g==}
     engines: {node: '>= 16'}
     dev: false
 
@@ -12123,14 +12123,14 @@ packages:
       - vue
     dev: true
 
-  /vue-i18n@9.8.0(vue@3.2.47):
+  /vue-i18n@9.9.0(vue@3.2.47):
-    resolution: {integrity: sha512-Izho+6PYjejsTq2mzjcRdBZ5VLRQoSuuexvR8029h5CpN03FYqiqBrShMyf2I1DKkN6kw/xmujcbvC+4QybpsQ==}
+    resolution: {integrity: sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==}
     engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      '@intlify/core-base': 9.8.0
+      '@intlify/core-base': 9.9.0
-      '@intlify/shared': 9.8.0
+      '@intlify/shared': 9.9.0
       '@vue/devtools-api': 6.5.1
       vue: 3.2.47
     dev: false

src/locale/en.json

@@ -0,0 +1,3 @@
+{
+  "app.name": "En Title"
+}

src/locale/index.ts

@@ -0,0 +1,17 @@
+import { createI18n } from 'vue-i18n'
+
+import en from './en.json'
+import zh from './zh.json'
+
+const messages = {
+  en,
+  zh,
+}
+console.log(uni.getLocale())
+
+const i18n = createI18n({
+  locale: 'zh',
+  messages,
+})
+
+export default i18n

src/locale/zh.json

@@ -0,0 +1,3 @@
+{
+  "app.name": "中文标题"
+}

src/main.ts

@@ -1,12 +1,13 @@
 import { createSSRApp } from 'vue'
 import App from './App.vue'
 import store from './store'
+import i18n from './locale/index'
 import 'virtual:svg-icons-register'
 import 'virtual:uno.css'
 
 export function createApp() {
   const app = createSSRApp(App)
-  app.use(store)
+  app.use(store).use(i18n)
   return {
     app,
   }

src/pages/index/i18n.vue

@@ -0,0 +1,9 @@
+<template>{{ $t('app.name') }}</template>
+
+<route lang="json">
+{
+  "style": {
+    "navigationBarTitleText": "%app.name%"
+  }
+}
+</route>

src/pages/index/index.vue

@@ -2,8 +2,8 @@
 <route lang="json5" type="home">
 {
   style: {
-    navigationStyle: 'custom',
+    // "navigationStyle": "custom",
-    navigationBarTitleText: '首页',
+    navigationBarTitleText: '%app.name%',
   },
 }
 </route>
@@ -15,6 +15,7 @@
     <view class="mt-12">
       <image src="/static/logo.svg" alt="" class="w-40 h-40 block mx-auto" />
     </view>
+    <view>{{ $t('app.name') }}</view>
     <view class="text-center text-4xl main-title-color mt-8">unibest</view>
     <view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发模板</view>
     <view class="text-justify max-w-100 m-auto">