项目不使用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