使用vue实现国际化详细代码以及注释
时间: 2024-10-10 17:08:25 浏览: 5
使用Vue.js实现国际化通常通过安装并使用第三方插件`vue-i18n`来完成。以下是简单的步骤及示例代码:
首先,你需要安装`vue-i18n`:
```bash
npm install vue-i18n
# 或者如果使用yarn
yarn add vue-i18n
```
接下来,在项目根目录创建一个`locales`文件夹,用于存放不同语言的翻译json文件,比如`en-US.js` 和 `zh-CN.js`:
```javascript
// locales/en-US.js
export default {
// 美国英语的翻译
message: 'Hello World',
}
// locales/zh-CN.js
export default {
// 中文翻译
message: '你好,世界',
}
```
然后在main.js或者配置文件中引入`vue-i18n`并配置:
```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enUS from './locales/en-US'
import zhCN from './locales/zh-CN'
Vue.use(VueI18n)
const i18n = new VueI18n({
// 指定默认语言
locale: 'en-US', // 这里可以换成你想要的默认语言,如'en-US' 或 'zh-CN'
// 支持的语言列表
fallbackLocale: 'en-US',
// 插件使用的语言资源
messages: { // 这里就是我们之前创建的json文件
en-US: enUS,
zh-CN: zhCN
}
})
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
```
现在,你在Vue组件中就可以通过`this.$t('message')`来访问国际化文本了。比如:
```vue
<template>
<div>{{ $t('message') }}</div>
</template>
<script>
export default {
computed: {
translatedMessage() {
return this.$t('message');
}
}
}
</script>
```