forked from opentiny/tiny-vue
168 lines
3.1 KiB
Markdown
168 lines
3.1 KiB
Markdown
## 国际化
|
|
|
|
`TinyVue` 使用 `Vue` 的官方国际化插件，需要安装 `vue-i18n` 插件。
|
|
|
|
### Vue 3.0 版本国际化配置
|
|
|
|
步骤一、推荐安装 `^9.1.6` 版本的`vue-i18n` 插件，通过以下命令安装：
|
|
|
|
```bash
|
|
yarn add vue-i18n
|
|
# 或者
|
|
npm install vue-i18n
|
|
```
|
|
|
|
步骤二、新增 `src/i18n/index.js` 文件，文件内容如下：
|
|
|
|
```js
|
|
import { createI18n } from 'vue-i18n'
|
|
import locale from '@opentiny/vue-locale'
|
|
|
|
export default (i18n) =>
|
|
locale.initI18n({
|
|
i18n,
|
|
createI18n,
|
|
messages: {
|
|
zhCN: {
|
|
test: '中文'
|
|
},
|
|
enUS: {
|
|
test: 'English'
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
步骤三、修改 `src/main.js`，添加以下代码：
|
|
|
|
```js
|
|
import { createApp } from 'vue'
|
|
import App from './App.vue'
|
|
import initI18n from './i18n'
|
|
import router from './router'
|
|
|
|
const app = createApp(App)
|
|
|
|
app.use(initI18n({ locale: 'zhCN' }))
|
|
|
|
app.use(router).mount('#app')
|
|
```
|
|
|
|
### Vue 2.0 版本国际化配置
|
|
|
|
步骤一、推荐安装 `8.15.0` 版本的`vue-i18n` 插件，通过以下命令安装：
|
|
|
|
```bash
|
|
yarn add vue-i18n@8.15.0
|
|
# 或者
|
|
npm install vue-i18n@8.15.0
|
|
```
|
|
|
|
步骤二、新增 `src/i18n/index.js` 文件，文件内容如下：
|
|
|
|
```js
|
|
import Vue from 'vue'
|
|
import VueI18n from 'vue-i18n'
|
|
import locale from '@opentiny/vue-locale'
|
|
|
|
Vue.use(VueI18n)
|
|
|
|
export default (i18n) =>
|
|
locale.initI18n({
|
|
i18n,
|
|
VueI18n,
|
|
messages: {
|
|
zhCN: {
|
|
test: '中文'
|
|
},
|
|
enUS: {
|
|
test: 'English'
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
步骤三、修改 `src/main.js`，添加以下代码：
|
|
|
|
```js
|
|
import Vue from 'vue'
|
|
import App from './App.vue'
|
|
import initI18n from './i18n'
|
|
import router from './router'
|
|
|
|
new Vue({
|
|
i18n: initI18n({ locale: 'zhCN' }),
|
|
router,
|
|
render: (h) => h(App)
|
|
}).$mount('#app')
|
|
```
|
|
|
|
### 自定义国际化配置
|
|
|
|
如果需要自定义国际化配置可以修改 `src/i18n/index.js` 如下以 `Vue 3.0` 版本为例（`Vue 2.0` 版本同理）：
|
|
|
|
```js
|
|
import { createI18n } from 'vue-i18n'
|
|
import locale from '@opentiny/vue-locale'
|
|
|
|
const customCreateI18n = ({ locale, messages }) => {
|
|
return createI18n({
|
|
locale,
|
|
messages,
|
|
legacy: false // 自定义配置
|
|
})
|
|
}
|
|
|
|
export default (i18n) =>
|
|
locale.initI18n({
|
|
i18n,
|
|
createI18n: customCreateI18n,
|
|
messages: {
|
|
zhCN: {
|
|
test: '中文'
|
|
},
|
|
enUS: {
|
|
test: 'English'
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
### 语言切换
|
|
|
|
配置国际化插件之后，可以通过以下方式在模板中使用国际化词条。
|
|
|
|
```html
|
|
<template>
|
|
<div>{{ $t('test') }}</div>
|
|
</template>
|
|
```
|
|
|
|
如果你需要切换语言，可以通过动态修改 Vue 实例中的 `ctx.$i18n.locale` 来实现。
|
|
|
|
```html
|
|
<script setup lang="ts">
|
|
import { getCurrentInstance } from 'vue'
|
|
|
|
const ctx = getCurrentInstance()?.ctx
|
|
|
|
const changeLang = () => {
|
|
ctx.$i18n.locale = ctx.$i18n.locale === 'zhCN' ? 'enUS' : 'zhCN'
|
|
}
|
|
</script>
|
|
```
|
|
|
|
Vue2 中切换语言的写法如下：
|
|
|
|
```html
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
changeLang: function () {
|
|
this.$i18n.locale = this.$i18n.locale === 'zhCN' ? 'enUS' : 'zhCN'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|