1.安装模块
npm i vue-i18n@6
2.在根目录下创建lang文件夹存放相关文件
3.在lang文件下创建语言包
//en.js
export default {
a: {
a: 'a',
},
//cn.js
export default {
a: {
a: '中文',
},
4.在lang下创建index.js文件
import cn from './cn.js'
import en from './en.js'
import VueI18n from 'vue-i18n';
import Vue from 'vue'
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'cn',
messages: {
'cn': cn,//简体
'en':en,//英文
}
})
export default i18n;
5.在main.js中加以下代码
import i18n from '@/lang/index.js';
const app = new Vue({
i18n,
...App
})
7.使用
<template>
<view class="content">
<image class="logo" src="/static/logo.png" @click="qie"></image>
<view class="text-area">
<text class="title">{{$t('a.a')}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
qie() {
this.$i18n.locale = "en"
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
8.在pages.json中使用用%%占位,即%a.a%