vue-i18n 多语言初始化

package.json

@@ -20,6 +20,7 @@
     "core-js": "^3.6.5",
     "element-ui": "^2.15.6",
     "vue": "^2.6.11",
+    "vue-i18n": "^8.26.7",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },

src/components/scaffold/fullpage.vue

@@ -2,9 +2,10 @@
   <div>
       <button @click="$router.go(-1)">返回</button>
       <div>
-         是否显示弹窗1 {{showPop}}
+         是否显示弹窗{{$t('lang.home')}} {{showPop}}
       </div>
-      <a href="https://www.baidu.com" target="_blank" @click="outerLink">baidu</a>
+      <!-- <a href="https://www.baidu.com" target="_blank" @click="outerLink">baidu</a>
+      <button @click="$i18n.locale == 'en' ? $i18n.locale = 'zh' : $i18n.locale = 'en'">切换语言</button> -->
       <TopHead :detail="detail" :ruleForm="ruleForm"></TopHead>
       <TopBody :list="articleList" @addArticle="addArticle"></TopBody>
       <el-drawer

src/libs/lang/en.js

+export const lang = {
+    home: 'home',
+}
\ No newline at end of file

src/libs/lang/zh.js

+export const lang = {
+    home: '首页',
+}
\ No newline at end of file

src/main.js

 import Vue from "vue";
-import VueElectron from './vue_electron.js';
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import VueI18n from 'vue-i18n';
+import VueElectron from './vue_electron.js';
 import { Button, Drawer, Message, MessageBox, Row, Col, Form,
   FormItem, Input, Menu, MenuItem, Submenu, Dropdown, DropdownItem, DropdownMenu, Select, Option, Tabs, TabPane, Tree, Upload, Dialog } from 'element-ui';
 
 
 Vue.config.productionTip = false;
 if(window.require) Vue.use(VueElectron);
+Vue.use(VueI18n);
 
 
 Vue.use(Button);
@@ -36,8 +38,17 @@ Vue.use(Dialog);
 Vue.prototype.$confirm = MessageBox.confirm;
 Vue.prototype.$message = Message;
 
+const i18n = new VueI18n({
+  locale: 'zh',
+  messages: {
+    'zh': require('@/libs/lang/zh.js'),
+    'en': require('@/libs/lang/en.js')
+  }
+});
+
 new Vue({
   router,
   store,
+  i18n,
   render: (h) => h(App),
 }).$mount("#app");

yarn.lock

@@ -11539,6 +11539,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-i18n@^8.26.7:
+  version "8.26.7"
+  resolved "https://registry.npmmirror.com/vue-i18n/download/vue-i18n-8.26.7.tgz#adfd48373449fe31438c48e3b3bd43044dc3a681"
+  integrity sha1-rf1INzRJ/jFDjEjjs71DBE3DpoE=
+
 "vue-loader-v16@npm:vue-loader@^16.1.0":
   version "16.8.3"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.3.tgz#d43e675def5ba9345d6c7f05914c13d861997087"