标签:ext out color route sage ons style 不同 语言切换
1.介绍:满足不同语言的切换,切换成中文,或者切换成英文,实现多语言切换功能
// 安装 npm install vue-i18n --save // 在src新建目录lang,lang目录新建三个文件 zh.js 和 en.js 和 index.js // zh.js文件中 module.exports = { user: { name: ‘你好‘ } } // en.js文件中 module.exports = { user: { name: ‘hello‘ } } // index.js文件中 import Vue from ‘vue‘ // 引入使用 import VueI18n from ‘vue-i18n‘ Vue.use(VueI18n) // 放置语言文件 const locales = { zh: require(‘./zh.js‘), en: require(‘./en.js‘) } // 创建一个 VueI18n 实例 const i18n = new VueI18n({ 表示使用哪种语言渲染页面 locale: ‘en‘, messages: locales }) export default i18n // 在main.js中引入挂载到vue的实例 import i18n from ‘./lang/index‘ new Vue({ router, store, render: h => h(App), i18n }).$mount(‘#app‘) // 在模板中使用 <template> <!--通过$t(‘对象吗.属性‘)调用-> <div>{{ $t(‘user.name‘) }}</div> </template> <script> export default { created () { // 可以通过 this.$i18n.locale = ‘要切换的语言‘ this.$i18n.locale = ‘en } } </script>
标签:ext out color route sage ons style 不同 语言切换
原文地址:https://www.cnblogs.com/zxuedong/p/12852644.html