步驟一：安裝**vue-i18n** npm install vue-i18n --save 步驟二：**main.js**文件的配置，在**main.js**中添加以下跟**vue-i18n**的使用有關的配置項 ``` // 引入i18n國際化插件 import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 注冊i18n實例并引入語言文件，文件格式等下解析 const i18n = new VueI18n({ locale: 'zh', messages: { 'zh': require('@/assets/languages/zh.json'), 'en': require('@/assets/languages/en.json') } }) //將i18n注入到vue實例中 new Vue({ el: '#app', router, store, i18n, components: { App }, template: '<App/>' }) ``` 兩個語言文件（zh.json，en.json）源碼如下： en.json ``` { "common": { "home": "Home", "login": "Login", "register": "Register", "appDownload": "APP Download", "aboutUs": "About Us", "faq": "FAQ", "contact": "Contact Us", "join": "Join Us", "copyright": "Copyright ? ZLGMcu Ltd", "news": "News", "toggle": "Toggle", "welcome": "Welcome, ", "userinfo": "Userinfo", "firstPage": "Home", "setting": "Setting", "exit": "Exit" }, "message": { "hint1": "Please Input Nickname", "hint2": "Please Input Username", "hint3": "Please Input Password", "hint4": "Don't find picture", "hint5": "No Account?", "hint6": "Register Now", "hint7": "Remember me", "hint8": "Can't login in?", "placeHolder1": "Nickname", "placeHolder2": "Username or Phone Number or Email", "placeHolder3": "Password(8 Digits at Least)" } } ``` **zh.json:** ``` { "common":{ "home": "首頁", "login": "登錄", "register": "注冊", "appDownload": "APP下載", "aboutUs": "關于我們", "faq": "常見問題", "contact": "聯系方式", "join": "加入我們", "copyright": "版權說明 ? 廣州xxx有限公司", "news": "消息", "toggle": "切換", "welcome": "歡迎您，", "userinfo": "個人信息", "firstPage": "主頁", "setting": "設置", "exit": "退出" }, "message":{ "hint1": "請輸入昵稱", "hint2": "請輸入賬號", "hint3": "請輸入密碼", "hint4": "沒有找到", "hin5": "沒有賬號？", "hint6": "馬上注冊", "hint7": "記住我", "hint8": "登錄遇到問題？", "placeHolder1": "昵稱", "placeHolder2": "用戶名、手機號或郵箱", "placeHolder3": "密碼（至少8位字符）" } } ``` 步驟三：使用vue-i18n，請只留意劃線或框框部分  代碼中的common.welcome對應語言文件中對應的項，各個不同的項引用方式一樣，因此不全部展示，點擊切換語言觸發changeLanguage()方法，改變i18n實例中locale的值，進而實現語言的切換。此文章只展示了英文中文兩種語言，其實多語言也一樣，只要多寫幾個語言文件，然后在main.js中進行對應的配置就行。 > 由于main.js中設置了默認顯示zh即中文，所以沒有點擊切換語言按鈕前的效果為： 假如在js中需要國際化，可寫成以下形式，舉個data中的值國際化的例子： ``` computed: { type () { return this.$t('xxx.xxx.xxx') } } 或者： data () { return { msg: '默認文字' } } methods: { changeLanguage () { // 同上，以下多加一行 this.msg = this.$t('xxx.xxx.xxx') } } ```