问题描述:vue3中在main.ts中引入i18n后,在页面中得模板语法中可直接使用。但是想在script脚本中直接添加会报错。
解决: 可以使用以下方法
1.在i18n文件夹下创建一个lang.ts(本展示使用ts,使用js得自行改变引入,导出方式即可)
import { createI18n } from 'vue-i18n'
import en from './en'
import cn from './zh'
const i18n = createI18n({
legacy: !true,
globalInjection: true,
locale: localStorage.getItem('language') || 'cn',
messages: {
en,
cn,
},
})
export default i18n
2.在需要使用得页面script中引入lang.ts文件
以下rules是element-plus form表单绑定rules
<template>
<div>
<el-form
ref="form"
:model="form"
:rules="rules"
label-position="top"
label-width="150px"
style="padding: 20px 16px 0 100px;background-color:#fff"
class="fix-form"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('databaseField.requestName')" prop="requestName">
<el-input v-model="form.requestName"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import i18n from '@/i18n/lang'
const { t } = i18n.global
export default defineComponent({
setup () {
const rules = reactive({requestName:[{required:true,trigger:'blur',message:t('formVerifyMessage.inputMsg') }],
})
const form = reactive({requestName:''})
return {
rules,
form
}
}
})
</script>