如何在Vue 3 web组件中使用vue-i18n？
我正在使用vue-cli 4.5.13和-target wc选项创建一个Vue web组件。我还需要组件来使用vue- i18n -next插件( vue 3项目的最后版本)，它需要将一些选项传递给主Vue实例，但是现在没有主实例，因为入口点是vue组件本身，所以必须在组件中实例化i18n。
我发现了vue2：如何在Vue web组件中使用vue-i18n？的问题，它适用于vue2，但是在组件选项中实例化i18n对象对于vue3无效($i18n仍未定义)。所以这是行不通的：
export default {
name: "custom-compo",
i18n: i18n,
components: { ChildComponent }
data, methods...
};如果导出web组件(并在标准页面上使用该组件)，以及如果npm run serve在标准应用程序中使用该组件，则该解决方案应该工作(但在compo中再次实例化i18n，如回答该问题，而不是在main.js中)。
我不是问如何在普通的vue项目中设置vue-i18n，而是询问如何使用vue 3构建或导出作为自定义元素或web组件的组件中的i18n。
我使用的不是复合api和setup()，而是旧的options。只是升级到vue3包，并按照文档更改了不推荐的语法。
回答 1
Stack Overflow用户
发布于 2021-08-19 03:43:21
步骤1:使用以下命令安装vue-i18n和dependency包，
npm install vue-i18n@next
npm install --save-dev @intlify/vue-i18n-loader步骤2:在i18n文件夹中创建i18n.js文件作为单独的i18n.js文件
import { createI18n } from 'vue-i18n'
function loadLocaleMessages () {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key).default
}
})
return messages
}
export default createI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()
})步骤3:在i18n中导入main.js
import i18n from './i18n'步骤4:在main.js中将i18n、router、store引用添加到createApp
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import i18n from './i18n'
const app = createApp(App).use(i18n).use(store).use(router)
app.mount('#app')步骤5:设计语言dropdown菜单
<li class="nav-item dropdown" ref="dropdown">
<button class="nav-link" data-toggle="dropdown" @click="toggleDropdown">
<i class="flag-icon " :class="selectedLanguage === 'en' ? 'flag-icon-us': 'flag-icon-es'"></i>
</button>
<div class="dropdown-menu dropdown-menu-right p-0" :class="{'show':isDropdownOpened}">
<a href="#" class="dropdown-item" :class="selectedLanguage === 'en' ? 'active': ''" @click.prevent="changeLanguage('en')">
<i class="flag-icon flag-icon-us mr-2"></i> English
</a>
<a href="#" class="dropdown-item" :class="selectedLanguage === 'es' ? 'active': ''" @click.prevent="changeLanguage('es')">
<i class="flag-icon flag-icon-es mr-2"></i> Spanish
</a>
</div>
</li>
步骤6:在组件中添加changeLanguage方法
changeLanguage (locale) {
this.$i18n.locale = locale
this.selectedLanguage = locale
this.isDropdownOpened = false
}步骤7:在locales文件夹中创建src文件夹
步骤8:创建en.json和es.json两个独立的文件
步骤9：en.json文件内部如下所示
{
"common.login": "Login",
"common.signout": "Sign Out",
"common.switchuser": "Switch User",
"common.profile": "Profile",
"common.submit": "Submit"
}步骤10：es.json文件内部如下所示
{
"common.login": "Acceso",
"common.signout": "Desconectar",
"common.switchuser": "Cambiar de usuario",
"common.profile": "Perfil",
"common.submit": "Enviar"}
https://stackoverflow.com/questions/68834033
复制相似问题
腾讯云开发者
