Vue i18n 翻译 index.html 标题

在 Vue 项目中使用 i18n 来翻译 index.html 的 title，你需要做以下几个步骤：\n\n1. 首先，安装并配置 vue-i18n，可以通过以下命令安装：\n\n\nnpm install vue-i18n\n\n\n然后在 Vue 的入口文件（例如 main.js）中导入并配置 vue-i18n：\n\njavascript\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n\nconst i18n = new VueI18n({\n locale: 'en', // 默认语言\n messages: {\n en: {\n // 英文翻译\n title: 'Welcome to my website'\n },\n zh: {\n // 中文翻译\n title: '欢迎访问我的网站'\n }\n }\n})\n\nnew Vue({\n i18n,\n render: h => h(App)\n}).$mount('#app')\n\n\n2. 然后，在 index.html 中使用 Vue 的插值语法来动态设置 title，示例如下：\n\nhtml\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>{{ $t('title') }}</title> \n</head>\n<body>\n <div id="app"></div>\n</body>\n</html>\n\n\n这样，在不同的语言环境下，index.html 的 title 会根据当前语言环境自动进行翻译。