1、在 main.js 中引入 vue-i18n （前提是要先引入 vue）

1 2 import VueI18n from 'vue-i18n' Vue.use(VueI18n)

2、准备本地的翻译信息

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
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> 
上述加粗地方如何显示
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄