vue使用国际化

vue使用国际化

1. 先安装依赖

npm i vue-i18n -S

2. 新建language文件夹（在src目录下）

3. 新建config.js文件 （在language文件下）

   const zh = {
       backManageSystem: '后台管理系统'
   }
   
   const en = {
       backManageSystem: 'Back Management System'
   }
   export { zh, en };
   

4. 新建index.js文件（在language文件下）

   import Vue from "vue"
   import VueI18n from "vue-i18n"
   
   Vue.use(VueI18n)
   
   import { zh, en } from "./config"
   
   const i18n = new VueI18n({
       locale: 'zh', //设置默认语言
       messages: {
           zh, en
       }
   })
   
   export default i18n
   

5. 在main.js引入并挂载实例

   import i18n from './language/index'
   
   new Vue({
     router,
     store,
     i18n,
     render: h => h(App)
   }).$mount('#app')
   

6. 使用方法

   <span>{{ $t("backManageSystem") }}</span>
   

7. 切换语言，通过 this.$i18n.locale=‘zh’>或this.$i18n.locale=‘en’ 切换语言

   <template>
   	<span>{{ $t("backManageSystem") }}</span>
   	<el-button @click="changeLanguage">切换语言</el-button>
   </template>
   
   export default{
   	methods:{
   		/*切换语言*/
   		changeLanguage(){
   			this.$i18n.locale = this.$i18n.locale == "en" ? "zh" : "en";
   		}
   	}
   }
   

欢迎小伙伴留言~