首页 新闻 会员 周边

vue中html页面写入$t(‘’)怎么显示

0
悬赏园豆:5 [已关闭问题] 关闭于 2018-07-30 12:09

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


Giotto95827的主页 Giotto95827 | 菜鸟二级 | 园豆:211
提问于:2018-07-23 12:14
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册