uniapp使用i18n

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%