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>
上述加粗地方如何顯示