vue i18n和ElementUI國際化使用總結

vue-i18n：

安裝:npm install vue-i18n

在main.js同級建i18n資料夾，並裡面建i18n.js、langs資料夾，langs資料夾下建en.js、cn.js

目錄如下:

.

├── assets
│   └── logo.png
├── components
│   └── helloworld.vue
├── i18n
│   ├── i18n.js
│   └── langs
│   ├── cn.js
│   ├── en.js
│   └── index.js
├── main.js
└── store.js

import vue from 'vue'

import vuei18n from 'vue-i18n'
import messages from './langs'
vue.use(vuei18n)
const i18n = new vuei18n()
export default i18n

//langs/index.js

import en from './en'
import cn from './cn'
export default 

const en = 

}export default en

const cn = 

}export default cn

import vue from 'vue'

import store from './store'
import i18n from './i18n/i18n'
vue.config.productiontip = false
store,
i18n,

//html: 

} // hello, world

//js切換語言

data() 
},methods: 
}

接下來是將elementui國際化，更改的地方不多，**如下

import vue from 'vue'

import locale from 'element-ui/lib/locale'
import vuei18n from 'vue-i18n'
import messages from './langs'
vue.use(vuei18n)
const i18n = new vuei18n()
locale.i18n((key, value) => i18n.t(key, value)) //重點：為了實現element外掛程式的多語言切換
export default i18n

import enlocale from 'element-ui/lib/locale/lang/en'

const en = ,
...enlocale
}export default en

import zhlocale from 'element-ui/lib/locale/lang/zh-cn'

const cn = ,
...zhlocale
}export default cn

vue i18n 用法及外掛程式值

npm install vue i18n import vuei18n from vue i18n importlangenfrom static en importlangzhchsfrom static zhchs vue.use vuei18n consti18n newvuei18n new...

vue cli專案中引入vue i18n

vue cli專案中引入vue i18n 安裝 npm install vue i18n可參考vue i18n官網文件 main.js中引入 import vue from vue import vuei18n from vue i18n vue.use vuei18n 配置語言包 main.js ...

語言國際化 vue i18n

安裝依賴包 npm i vue i18n s 在根目錄建立乙個 lang的資料夾,並且在lang資料夾內建立cn.js 和 en.js 開啟 main.js,注入vue例項中 import vue from vue import vuei18n from vue i18n 語言國際化 vue.use...