Vue3搭配自定义路由时vue-i18n报hasOwnProperty相关错误如何解决

你当前使用的是适配Vue 3的vue-i18n v9及以上版本，该版本的注册API和Vue 2对应的vue-i18n v8及更低版本完全不同。你沿用了旧版本的注册写法，没有先创建i18n实例就直接传入配置注册，才会触发属性读取错误。

1. 调整导入语句，从vue-i18n中引入createI18n方法
2. 先创建i18n实例并传入你的本地化配置
3. 将i18n实例注册到vue应用中

修改后完整代码如下：

import { createApp, h } from 'vue'
import routes from './routes'
// 调整导入，引入createI18n方法
import { createI18n } from 'vue-i18n'
import de from './locale/de';
import en from './locale/en';

const SimpleRouter = {
    data: () => ({
        currentRoute: window.location.pathname
    }),

    computed: {
      ViewComponent () {
        const matchingPage = routes[this.currentRoute] || '404'
        return require(`./pages/${matchingPage}.vue`).default
      }
    },
  
    render () {
      return h(this.ViewComponent)
    },
  
    created () {
      window.addEventListener('popstate', () => {
        this.currentRoute = window.location.pathname
      })
    }
}

// 先创建i18n实例
const i18n = createI18n({
  locale: 'de',
  messages: {
      de,
      en
  },
  // 如果你在组件中使用Composition API，需设置legacy: false
  // 如果仅使用Options API的$t写法，可以去掉该配置或设为true
  legacy: false
})

var app = createApp(SimpleRouter)
// 直接注册i18n实例即可
app.use(i18n)
app.mount('#app')

• 第一种createApp({SimpleRouter, i18n})写法错误：createApp的第一个参数是根组件配置对象，不能直接传入i18n实例
• 第二种把i18n挂到SimpleRouter选项的写法是Vue 2的旧用法，Vue 3的全局插件统一通过app.use()注册生效，不需要挂载到根组件选项上

修改完成后即可正常使用i18n能力，Options API用$t('xxx')调用，Composition API用const { t } = useI18n()调用即可。

内容的提问来源于stack exchange，提问作者Badenlebt