1、在 main.js 中引入 vue-i18n （前提是要先引入 vue）
import VueI18n from'vue-i18n'
Vue.use(VueI18n)
2、準備本地的翻譯信息
const messages = {
zh: {
message: {
hello:'好好學習，天天向上！'
}
},
en: {
message: {
hello:'good good study, day day up!'
}
}
}
3、創建帶有選項的 VueI18n 實例
const i18n =new VueI18n({
locale:'en',// 語言標識
messages
})
4、把 i18n 掛載到 vue 根實例上
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>
上述加粗地方如何顯示