vue-i18n html vue多语言配置 国际化

项目不使用npm 的基础上，用vue开发的项目，在该项目上添加国际化。

第一步 引入文件到index.html

<script type="module"  src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
https://unpkg.com/vue-i18n@8.9.0/dist/vue-i18n.js

第二步

import zh from './langs/zh-CN.js'
import en from './langs/en.js'


const messages = {
  en: en,
  zh: zh,
  me: me
}

// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
  locale: 'en', // 设置默认语言
  messages, // 
})

new Vue({i18n}).$mount('#app')

zh-CN.js文件信息

 const cn = {
  
	"english":"中文",
	
 }
 export default cn;

en.js 文件信息

		const en = {
		english:"english"
	 }
	 export default en;

第三步

在html 文件中

<h3>{{$t("english")}}</h3>

在js文件中

this.$t('english') 或者 i18n.tc('english')

第四步

切换语言

切换成中文

this.$i18n.locale ="zh"

切换成英文

this.$i18n.locale ="en"

参考地址：https://kazupon.github.io/vue-i18n/zh/installation.html