按需引入 iView 组件+vue-i18n_iview 插件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40988982/article/details/129619495

文章详细介绍了如何在项目中安装和配置iview4、vue-i18n6以实现组件的懒加载和国际化功能。通过创建.babelrc文件设置babel-plugin-import，以及在utils中创建i18n.js和iview.js文件来管理语言包和按需引入组件。在main.js中注册这些配置，最后在模板中使用$t方法展示国际化文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、版本

iview 4+
vue-i18n 6+

二、安装iview并安装插件babel-plugin-import实现懒加载，安装i18n

$ npm install view-design --save

$ npm install babel-plugin-import --save-dev
// 我安装的时6以上版本，6一下参考官网
$ npm install vue-i18n@6.1.3

三、在根目录下创建.babelrc文件并配置

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "view-design",
    "libraryDirectory": "src/components"
  }]]
}

四、在utils中创建i18n.js 并配置语言

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from 'view-design/dist/locale/zh-CN'
import en from 'view-design/dist/locale/en-US'

Vue.use(VueI18n)
Vue.local = () => {
}

// 本地语言包地址
let myZh = require('../assets/lang/zh.json')
let myEn = require('../assets/lang/en.json')

// i18n的语言资源文件（合并语言）
let messages = {
  'zh': Object.assign(myZh, zh),
  'en': Object.assign(myEn, en)
}

//  默认英文，在项目初始化时修改  -> App.vue
export const i18n = new VueI18n({
  locale: 'en',
  messages
})

五、在utils中创建iview.js 并按需引入需要得组件

import {
  Button,
  Table,
  Message,
  Switch
} from 'view-design'
const iview = {
  install: function (Vue) {
    Vue.component('Button', Button)
    Vue.component('Table', Table)
    Vue.component('i-switch', Switch)
    Vue.prototype.$Message = Message
  }
}
export default iview

六、在main.js中引入两个js并注册到vue中

//  iview
import iview from './utils/iview'
import 'view-design/dist/styles/iview.css'

import { i18n } from './utils/i18n'

Vue.use(iview)
Vue.use( i18n)

七、使用

<template>
  <Button type="primary">{{ $t('name') }}</Button> 
</template>