vite项目多语言
时间: 2023-08-11 09:07:49 浏览: 48
Vite项目支持多语言,可以使用类似于vue-i18n的库来实现多语言功能。以下是一个使用vue-i18n的例子:
1. 安装vue-i18n
```
npm install vue-i18n
```
2. 创建语言文件
在项目根目录下创建一个`locales`目录,在该目录下创建语言文件,例如`en-US.js`和`zh-CN.js`。
en-US.js:
```js
export default {
hello: 'Hello',
world: 'World'
}
```
zh-CN.js:
```js
export default {
hello: '你好',
world: '世界'
}
```
3. 在Vite中引入vue-i18n
在`main.js`中引入vue-i18n并创建实例:
```js
import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
legacy: false,
locale: 'en-US', // 默认语言
messages: {
'en-US': require('./locales/en-US').default,
'zh-CN': require('./locales/zh-CN').default
}
})
createApp(App).use(i18n).mount('#app')
```
4. 在组件中使用多语言
在组件中使用$t方法来获取对应语言的文本:
```html
<template>
<div>
<p>{{ $t('hello') }} {{ $t('world') }}</p>
</div>
</template>
```
这样就可以根据用户的语言设置来显示不同的文本了。