(1)首先我们需要在项目中安装iview
npm install iview
(2) 其次在项目项目中安装vue-i18n组件进行国际化配置
npm install vue-i18n
(3) 在main.js的统计目录下创建i18n.js,里面的呢绒具体如下
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
function loadLocaleMessages () {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.js$/i)
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([a-z0-9]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)['default']
}
})
return messages
}
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()
})
(4)在main.js的同级目录locales下的zh.js 和 en.js分别进行中文和英文的配置,文件为json结构
(5)配置main.js(部分代码)
// 引入i18n文件
import i18n from './i18n'
Vue.locale = () => {} // ivew组件国际化不可缺少的部分
new Vue({
router,
i18n,
render: h => h(App)
}).$mount('#app')
(6)在html中进行引用
到此为止国际化就应该可以了(如果有什么问题的话可以在下方评论,若我能够解决很高兴为大家服务谢谢)