本文详细介绍了如何在Vue项目中实现多语言支持，通过引入vue-i18n插件，准备翻译信息，创建VueI18n实例，并将其挂载到Vue根实例上，最后在HTML中使用{{$t}
1、在 main.js 中引入 vue-i18n （前提是要先引入 vue）
|
1
2
|
import VueI18n from'vue-i18n'Vue.use(VueI18n) |
2、准备本地的翻译信息
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const messages = { zh: { message: { hello:'好好学习，天天向上！' } }, en: { message: { hello:'good good study, day day up!' } }} |
3、创建带有选项的 VueI18n 实例
|
1
2
3
4
|
const i18n =new VueI18n({ locale:'en',// 语言标识 messages}) |
4、把 i18n 挂载到 vue 根实例上
|
1
2
3
4
5
|
const app =new Vue({ router, i18n, ...App}).$mount('#app') |
5、html写入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="src/main.js"></script>
</head>
<body>
<div id="app">
<h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
</div>
</body>
</html>
上述加粗地方如何显示
扫一扫
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
