vue項目實現多語言功能

最近項目需要做一個國際版，多種語言切換功能。
有同事提出可以分別分開做幾個項目，然後分別打包。
但是我認爲這種方式弊大於利。
首先，弊端是難以同步管理。項目的功能80%以上都是相同的，分開幾個項目，意味着有新的需求時，在每個項目裏進行一次再開發，同時有bug時，也是幾個地方進行修改。
第二，優點不明顯。頁面中靜態文字是固定的，並不是會常更改。通常情況下 ，只要配置一次。如果有修改，也只需要在配置文件中修改一下即可，並不會耗費很多時間和精力。
下面說說，如何做成配置項，進行引入。

一、安裝語言配置包

安裝vue-i18n包

npm

npm i vue-i18n

yarn

yarn add vue-i18n

二、搭建配置文件

在根目錄創建一個i18n文件夾
創建一個index.js文件

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

// 以下爲語言包單獨設置的場景，單獨設置時語言包需單獨引入
const messages = {
  zh_CN: require("./locale/zh_CN"), // 中文語言包
  en_US: require("./locale/en_US"), // 英文語言包
};

export default new VueI18n({
  locale: 'zh_CN', // set locale 默認顯示英文
  messages: messages // set locale messages
});

在i18n文件夾下，創建locale文件夾，創建zh_CN.js和en_US.js文件。
格式如下：
zh_CN.js文件

module.exports = {
  // 公用底部下載提示欄
  footer: {
    open: "打開",
    download: "下載"
  }

en_US.js文件

module.exports = {
  // 公用底部下載提示欄
  footer: {
    open: "open",
    download: "download"
  }

三、將語言包引入vue項目中

在main.js中，加入這句話

//引入多語言支持
import i18n from "@/i18n";

在vue實例中 ，引入i18n

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

加粗樣式

四、在組件中引入相應的配置變量

在組件中引用

<button type="button">{$t('footer.open')}</button>

在js中引用

this.btnText = this.$t('footer.open');