国际化

src/App.vue

@@ -13,7 +13,7 @@ export default {
 </script>
 
 <style>
-@import "//at.alicdn.com/t/font_1635628_xspbsio88z.css";
+@import "//at.alicdn.com/t/font_1635628_7cg9x5d0v7.css";
 @import "./assets/css/common.css";
 @import './assets/global/font.css';
 @import "./assets/css/reset.css";

src/assets/common/jp.js

+export const pub={
+    account:"アカウント",
+    passwd:'パスワード',
+    login:'ログイン',
+    manasystem:'管理システム',
+    qsrzh:'口座に入力してください',
+    qsrmm:'暗証番号を入力してください',
+    xgzl:'資料を修正する',
+    tcdl:'ログアウト',
+    qhyy:'言語を切り替える',
+    hello:'こんにちは',
+    home:'トップページ',
+    hotelList:'ホテル一覧',
+    hotelorder:'ホテル予約',
+}
\ No newline at end of file

src/assets/common/zh.js

+export const pub={
+    account:"账号",
+    passwd:'密码',
+    login:'登录',
+    manasystem:'管理系统',
+    qsrzh:'请输入账户',
+    qsrmm:'请输入密码',
+    xgzl:'修改资料',
+    tcdl:'退出登录',
+    qhyy:'切换语言',
+    hello:'你好',
+    home:'首页',
+    hotelList:'酒店列表',
+    hotelorder:'酒店订单',
+}
\ No newline at end of file

src/components/global/Login.vue

 <template>
   <div class="login">
     <div class="loginContent">
-      <p class="f40 bold c11">SCM管理システム</p>
+      <p class="f40 bold c11">SCM{{$t('pub.manasystem')}}</p>
       <div style="margin:60px 0 50px 0">
         <p title="账号">
           <img style="width:16px;height:14px" src="../../assets/img/user.png" alt="">
-          アカウント</p>
-        <el-input v-model="userInfo.EmAccount" placeholder="口座に入力してください"></el-input>
+          {{$t('pub.account')}}</p>
+        <el-input v-model="userInfo.EmAccount" :placeholder="$t('pub.qsrzh')"></el-input>
       </div>
       <div>
         <p title="密码">
-          <img style="width:16px;height:14px;margin-right:4px" src="../../assets/img/passwd.png" alt="">パスワード</p>
-        <el-input type="password" v-model="userInfo.EmPassword" placeholder="暗証番号を入力してください"></el-input>
+          <img style="width:16px;height:14px;margin-right:4px" src="../../assets/img/passwd.png" alt="">
+          {{$t('pub.passwd')}}
+          </p>
+        <el-input type="password" v-model="userInfo.EmPassword" :placeholder="$t('pub.qsrmm')"></el-input>
       </div>
       <div class="loginDiv">
-        <span v-loading="btnLoading" @click="Login" title="登录">ログイン</span>
+        <span v-loading="btnLoading" @click="Login" title="登录">{{$t('pub.login')}}</span>
       </div>
     </div>
   </div>

src/components/global/Nav.vue

@@ -6,11 +6,25 @@
           <ul>
             <li @click="showUpdateBoard()" style="cursor: pointer;margin-top:12px" title="修改资料">
               <i style="color:#FFA475" class="iconfont iconxiugaiziliao"></i>
-              <span style="margin-left:6px">資料を修正する</span>
+              <span style="margin-left:6px">{{$t('pub.xgzl')}}</span>
             </li>
             <li @click="LoginOut" style="cursor: pointer;margin-top:12px" title="退出登录">
               <i style="color:#FFA475" class="iconfont icontuichudenglu"></i>
-              <span style="margin-left:6px">ログアウト</span>
+              <span style="margin-left:6px">{{$t('pub.tcdl')}}</span>
+            </li>
+            <li style="cursor: pointer;margin-top:12px">
+              <el-dropdown>
+                  <span class="el-dropdown-link">
+                    <i style="color:#FFA475" class="iconfont iconyuyan"></i>
+                    <span style="margin-left:6px">{{$t('pub.qhyy')}}</span>
+                    <i class="el-icon-arrow-down el-icon--right"></i>
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item @click.native="ChangeLan('Japanese')">日语 <i v-if="language=='Japanese'" class="iconfont icongou"></i></el-dropdown-item>
+                    <el-dropdown-item @click.native="ChangeLan('zh-CN')">中文 <i v-if="language=='zh-CN'" class="iconfont icongouu"></i></el-dropdown-item> 
+                  </el-dropdown-menu>
+                </el-dropdown>
+              
             </li>
           </ul>
           <span slot="reference" style="display: inline-flex;align-items: center;cursor: pointer;">
@@ -20,7 +34,7 @@
           </span>
         </el-popover>
         <br />
-        <span class="f14"><span style="color:#BEBEBE">こんにちは</span>,{{scmAccount.Name}}</span>
+        <span class="f14"><span style="color:#BEBEBE">{{$t('pub.hello')}}</span>,{{scmAccount.Name}}</span>
       </div>
     </div>
     <div class="BigmenuDiv" :style='{"height":menuheight+"px"}'>
@@ -28,20 +42,20 @@
         <el-menu-item index="0" route="/home" title="首页">
           <div @click="goHome" class="menuDiv">
             <i class="iconfont icon-shouye"></i>
-            <span slot="title">トップページ</span>
+            <span slot="title">{{$t('pub.hello')}}</span>
           </div>
         </el-menu-item>
         <el-menu-item index="1" title="酒店列表">
           <div @click="goUrl('HotelList')" class="menuDiv">
             <i class="iconfont icon-shouye"></i>
-            <span slot="title">ホテル一覧
+            <span slot="title">{{$t('pub.hotelList')}}
             </span>
           </div>
         </el-menu-item>
         <el-menu-item index="2" title="酒店订单">
           <div @click="goUrl('HotelOrder')" class="menuDiv">
             <i class="iconfont icon-shouye"></i>
-            <span slot="title">ホテル予約</span>
+            <span slot="title">{{$t('pub.hotelorder')}}</span>
           </div>
         </el-menu-item>
       </el-menu>
@@ -60,6 +74,7 @@
         scmAccount: {}, //SCM账号信息
         defaultHeadImg: 'this.src="' + require("../../assets/img/defaultperson.png") + '"',
         menuheight: 0,
+        language:'zh-CN',
       }
     },
     created() {
@@ -94,6 +109,11 @@
       },
     },
     methods: {
+      ChangeLan(str){
+        this.language=str;
+        this.$i18n.locale = str;
+        localStorage.language = str;
+      },
       LoginOut() {
         localStorage.removeItem("scmAccount");
         location.href = '/'

src/components/global/index.vue

@@ -96,6 +96,14 @@
       }
     },
     created() {
+      let language = localStorage.language
+    if (!language) {
+      this.language = 'zh-CN';
+      this.$i18n.locale = 'zh-CN';
+    } else {
+      this.language = language
+      this.$i18n.locale = language;
+    }
       this.minHeight = document.body.clientHeight;
       if (!this.getLocalStorage()) {
         this.$router.push({

src/main.js

@@ -7,6 +7,8 @@ import plug from './plugins/index'
 import moment from 'moment'
 
 import axios from 'axios'
+import VueI18n from 'vue-i18n'
+Vue.use(VueI18n) // 通过插件的形式挂载
 
 import vueQuillEditor from 'vue-quill-editor'
 import 'quill/dist/quill.core.css'
@@ -56,10 +58,20 @@ Vue.filter("YMDHMS", function (date) {
   return moment(date).format("YYYY-MM-DD HH:mm:ss");
 })
 
+const i18n = new VueI18n({
+  locale: 'zh-CN',    // 语言标识
+  //this.$i18n.locale // 通过切换locale的值来实现语言切换
+  messages: {
+    'zh-CN': require('./assets/common/zh'),   // 中文语言包
+    'Japanese' : require('./assets/common/jp')    // 日本语言包
+  }
+})
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
+  i18n,
   components: { App },
   template: '<App/>'
 })

src/plugins/index.js

@@ -11,12 +11,13 @@ export default {
       },
       //域名管理对象
       Vue.prototype.domainManager = function () {
-        var domainUrl = "http://127.0.0.1"; //主域名
+        // var domainUrl = "http://127.0.0.1"; //主域名
+        var domainUrl = "http://testapi.oytour.com"; //主域名
         let locationName = window.location.hostname;
         if (this.isOnline()) {
           if (window.location.host.indexOf('testzcyx.oytour.com') != -1) {
-            domainUrl = "http://127.0.0.1"
-            //domainUrl = "http://testapi.oytour.com"
+            // domainUrl = "http://127.0.0.1"
+            domainUrl = "http://testapi.oytour.com"
           } else if (window.location.host.indexOf('oytour.com') != -1)
             domainUrl = "http://reborn.oytour.com"
         }