(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中进行引用
在这里插入图片描述
在这里插入图片描述
到此为止国际化就应该可以了(如果有什么问题的话可以在下方评论,若我能够解决很高兴为大家服务谢谢)

Logo

前往低代码交流专区

更多推荐