vue项目 - uniapp 设置可切换中英文

需求：
可以去切换中英文模式

npm i vue-i18n

显示：
中文版

英文版

代码：

1. main.js

import VueI18n from 'vue-i18n';
Vue.use(VueI18n)
import languages from '@/common/lang'; //详见2
const i18n = new VueI18n({
	locale:  uni.getStorageSync('lang') ? uni.getStorageSync('lang') : 'cn', //现在配置的是中文
	 // getStorageSync 数据缓存
	messages: {
		'en': languages.en, //英文
		'cn': languages.cn  //中文
	}
});

2. /common/lang
   
   index.js 文件

//这里是设置的自动引入文件。
const files = require.context('.', false, /\.js$/)
const languages = {}
files.keys().forEach(key => {
  if (key === './index.js') return
  const item = files(key).default
  let name = key.replace(/.\/|.js/g, '')
  languages[name] = item || 'cn'
})

export default languages;

cn.js

const cn = {
    home:{
        welcomeTitle: '欢迎来到这里',
        welcomeSubTitle: '热烈欢迎你的到来'
    },
    service:{
        cabinService:{
            desc: '欢迎'
        }
    }
}
export default cn;

en.js

const en = {
    home:{
        welcomeTitle: 'Welcome here',
        welcomeSubTitle: 'A warm welcome to you'
    },
    service:{
        cabinService:{
            desc: 'Welcome'
        }
    }
}
export default en;

使用：

 <view class="left-box">
     <view class="tips-title">{{ $lang.home.welcomeTitle }}</view>
     <view class="tips-sub">{{ $lang.home.welcomeSubTitle }}</view>
 </view>