vue3页面script脚本中使用i18n国际化语言

程序媛-莉莉子

已于 2022-08-12 15:57:14 修改

阅读量1.3k

点赞数 2

文章标签： javascript 前端 vue.js

于 2022-07-26 16:59:58 首次发布

本文链接：https://blog.csdn.net/qq_42483955/article/details/125998075

版权

本文介绍如何在Vue3项目中正确地在main.ts引入并使用i18n进行多语言支持，包括创建lang.ts文件、设置国际化配置，并在script脚本中导入并使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：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>