uniapp js 中如何使用国际化？

main.js 配置

• main.js 引入并初始化 VueI18n
• 全局挂载 需使用国际化的js文件

import App from './App.vue'
import messages from './locale/index'

let i18nConfig = {
	locale: uni.getLocale(),
	messages
}

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)

// 全局挂载 test js
import testCommand from './common/BLECommand.js'
Vue.prototype.testCommand = testCommand;


App.mpType = 'app'
const app = new Vue({
	i18n,
	...App
})

app.$mount()
// #endif


// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	return {
		app
	}
}
// #endif

• 具体流程看官网 以上配置在 vue 页面中可以正常使用，例：this.$t('index.demo');

遇到问题

• 在全局注册 js 文件中，无法使用 this.$t() ，那么如何使用国际化？
• BLECommand.js 使用国际化j时报错， 页面出现白屏

// 使用国际化
import { initVueI18n } from '@dcloudio/uni-i18n'  
import messages from '@/locale/index' 
const { t } = initVueI18n(messages)

console.log('res：', t) // 正常
console.log('get value：', t('index.demo')) // 报错

• vue 页面调用时，直接报错，如下图

console.log('*****', this.testCommand)

• 原因： 因为页面加载时，实例未加载。无法使用国际化，通过 延迟调用 会发现能正常拿到值

// 全局注册：加延迟能正常获取值
setTimeout(() => {
	console.log('get value：', t('index.demo')) //  uni-app 国际化演示
}, 0)

• 有什么方法在 不加延迟 情况下，正常获取值？

解决方案

以下介绍几种方式，根据个人所需，欢迎指点~

• 方式一：延迟加载模块
• 方式二：局部引入
• 方式三：按需导入

Demo

• BLECommand.js

// 使用国际化
import { initVueI18n } from '@dcloudio/uni-i18n'  
import messages from '@/locale/index' 
const { t } = initVueI18n(messages)  

// 例：默认导出数组
export default {
	instructArr: [
        { key: 'quantity', command1: '0x03', command2: '0x23', name: t('index.demo') }
	]
}

方式一：异步加载模块

• 在 main.js中 通过异步加载模块方式，使用国际化

Promise 写法

• import()返回一个 Promise 对象
• 注意：数据结构多了一层default

import('./common/BLECommand.js').then((res) => {
	console.log('res：', res);
    Vue.prototype.testCommand = res.default;
})


// res
{
    "default": {
        "instructArr": [
            {
                "key": "quantity",
                "command1": "0x03",
                "command2": "0x23",
                "name": "uni-app 国际化演示"
            }
        ]
    }
}

• 使用

console.log('*****', this.testCommand)

await写法

• 由于import()返回 Promise 对象，所以需要使用then()方法指定处理函数。考虑到代码的清晰，更推荐使用await命令。

async function requireBLE() {
    // 等同于
    // import("./common/BLECommand.js").then(res => {
    //   Vue.prototype.testCommand = res;
    // });
    
    const command = await import('./common/BLECommand.js');
	Vue.prototype.testCommand = command;
}

requireBLE();

方式二：局部引入

import testCommand from '@/common/BLECommand.js'

• 使用

console.log('*****', testCommand)


// result
{
    "instructArr": [
        {
            "key": "quantity",
            "command1": "0x03",
            "command2": "0x23",
            "name": "uni-app 国际化演示"
        }
    ]
}

方式三：按需导入

修改下 BLECommand.js 写法，这里新建方法

export const createInstruct = () => {
	let instructArr = [
		{ key: 'quantity', command1: '0x03', command2: '0x23', name: t('index.demo') }
	]
	
	return instructArr
}

• 使用

import { createInstruct } from '@/common/bluetoothCommand.js'
console.log('*****', createInstruct())


// result
[
    {
        "key": "quantity",
        "command1": "0x03",
        "command2": "0x23",
        "name": "uni-app 国际化演示"
    }
]