Vue 页面标题国际化：使用 vue-i18n 实现中英文切换

要实现中英文切换，可以使用 vue-i18n 库来管理多语言。首先，在项目中安装 vue-i18n 库：\n\nbash\nnpm install vue-i18n\n\n\n然后在项目中创建一个i18n.js文件来配置多语言支持：\n\njavascript\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n\nconst messages = {\n en: {\n title: 'Title'\n },\n zh: {\n title: '标题'\n }\n}\n\nconst i18n = new VueI18n({\n locale: 'en', // 默认语言为英文\n messages\n})\n\nexport default i18n\n\n\n在上面的配置中，我们定义了两种语言：英文和中文，并分别设置了对应的标题。默认语言为英文。\n\n接下来，在主组件中引入并使用i18n.js配置的多语言：\n\nvue\n<template>\n <div>\n <h1>{{ $t('title') }}</h1>\n <button @click="changeLanguage">Change Language</button>\n </div>\n</template>\n\n<script>\nimport i18n from './i18n'\n\nexport default {\n name: 'App',\n i18n,\n methods: {\n changeLanguage() {\n if (this.$i18n.locale === 'en') {\n this.$i18n.locale = 'zh'\n } else {\n this.$i18n.locale = 'en'\n }\n }\n }\n}\n</script>\n\n\n在上面的代码中，我们使用$t方法来获取对应语言的标题，并通过$i18n.locale来切换语言。\n\n最后，在入口文件main.js中引入i18n.js：\n\njavascript\nimport Vue from 'vue'\nimport App from './App.vue'\nimport i18n from './i18n'\n\nVue.config.productionTip = false\n\nnew Vue({\n i18n,\n render: h => h(App),\n}).$mount('#app')\n\n\n这样就可以实现在vue页面中使用vue-i18n切换中英文了。当点击"Change Language"按钮时，语言将切换为另一种。