添加i18n国际化

zhangzengfei

2021-09-17 8512f4ae542325e15058c9fabb019db6ef1000ef

添加i18n国际化

 package.json

@@ -29,6 +29,7 @@
    "stylus-loader": "^3.0.2",
    "vue": "^2.6.11",
    "vue-awesome-swiper": "^3.1.3",
    "vue-i18n": "^8.25.1",
    "vue-js-toggle-button": "^1.3.3",
    "vue-photo-preview": "^1.1.3",
    "vue-qrcode-component": "^2.1.1",

 src/components/langSelect/index.vue

New file
@@ -0,0 +1,38 @@
<template>
  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
    <div>
      {{btn}}
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="language==='zh'" command="zh">
        简体中文
      </el-dropdown-item>
      <el-dropdown-item :disabled="language==='en'" command="en">
        English
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  computed: {   
    language() {
      return this.$i18n.locale
    },
     btn() {
      return this.language == 'en' ? 'English': '简体中文'
    },
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      sessionStorage.setItem("language", lang);
      // this.$message({
      //   message: 'Switch Language Success',
      //   type: 'success'
      // })
    }
  }
}
</script>

 src/components/licence/index.vue

@@ -177,7 +177,7 @@
      if (rsp && rsp.success) {
        if (rsp.data.License.Expires === 0) {
          this.authStatus = 'unregistered'
          this.tip = '未授权, 点击注册'
          this.tip = this.$t('licence.register')
        } else {
          this.authStatus = 'registered'
          this.registe.company = rsp.data.License.RegCode.Company
@@ -187,9 +187,9 @@
          this.expireTime = rsp.data.License.Expires
          this.expired = rsp.data.Expired
          if (this.expired) {
            this.tip = '授权已过期'
            this.tip = this.$t('licence.expired')
          } else {
            this.tip = '已授权'
            this.tip = this.$t('licence.authorized')
          }
        }
      }

 src/lang/en.js

New file
@@ -0,0 +1,21 @@
export default {
  login:{
    unauthorized:"Unauthorized",
    authorized:"Authorized",
    company:"Basic Technology",
    aios:"Operating System"
  },
  button:{
    login:"Login"
  },
  placeholder: {
    enterUsername:"Please enter username",
    enterPassword:"Please enter password",
  },
  licence:{
    unauthorized:"unauthorized",
    register:"sing up",
    authorized:"authorized",
    expired:"expired",
  }
}

 src/lang/index.ts

New file
@@ -0,0 +1,43 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale,
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale,
  },
}
export function getLanguage() {
  const chooseLanguage = sessionStorage.getItem('language')
  if (chooseLanguage) return chooseLanguage

  // if has not choose language
  const language = 'zh'

  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'en'
}
const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: getLanguage(),
  // set locale messages
  messages,
})

export default i18n

 src/lang/zh.js

New file
@@ -0,0 +1,19 @@
export default {
  login:{
    company:"北京贝思科技术有限公司",
    aios:"人工智能操作系统"
  },
  button:{
    login:"登录"
  },
  placeholder: {
    enterUsername:"请输入用户名",
    enterPassword:"请输入密码",
  },
  licence:{
    unauthorized:"未授权",
    register:"未授权, 点击注册",
    authorized:"已授权",
    expired:"授权过期",
  }
}

 src/pages/index/App.vue

@@ -3,6 +3,9 @@
    <div class="web-site">
      <a href="http://www.smartai.com" target="_blank">www.smartai.com</a>
    </div>

    <!-- 授权信息 -->
    <lang-select class="lang-select"/>
    <licence />
    <div class="right-bg" style>
      <particle-network />
@@ -12,7 +15,7 @@
        <img src="/images/login-logo.png" alt width="105px" height="105px" />
      </div>
      <div class="login-com">
        <span>北京贝思科技术有限公司</span>
        <span>{{ $t('login.company') }}</span>
      </div>
      <div class="login-form">
        <el-form
@@ -24,7 +27,7 @@
          class="demo-ruleForm"
        >
          <el-form-item prop="loginName">
            <el-input v-model="user.loginName" style="width:280px" placeholder="请输入用户名">
            <el-input v-model="user.loginName" style="width:280px" :placeholder="$t('placeholder.enterUsername')">
              <i slot="prefix" class="iconfont iconyonghu1"></i>
            </el-input>
          </el-form-item>
@@ -35,20 +38,20 @@
              v-model="user.password"
              autocomplete="off"
              style="width:280px"
              placeholder="请输入密码"
              :placeholder="$t('placeholder.enterPassword')"
            >
              <i slot="prefix" class="iconfont iconmima"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">登录</el-button>
            <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">{{ $t('button.login') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- <p class="gradient-text gradient-text-one">——— {{serverTitle || 'SmartAI — ReID'}} ———</p> -->
      <p class="gradient-text gradient-text-one">
        ——
        <b>SmartAI</b> 人工智能操作系统 ——
        <b>SmartAI</b> {{ $t('login.aios') }} ——
      </p>
      <p
        class="gradient-text gradient-text-one"
@@ -59,9 +62,10 @@
</template>

<script>
import { tologin, getLoginUserData, getServerName } from './api.ts'
import { tologin, getLoginUserData, getServerName } from './api.ts';
import ParticleNetwork from './ParticleNetwork'
import Licence from '@/components/licence'
import LangSelect from '@/components/langSelect'
import { getMenuListData } from "@/api/utils";

export default {
@@ -71,7 +75,16 @@
  },
  components: {
    ParticleNetwork,
    Licence
    Licence,
    LangSelect
  },
  computed: {
    rules() {
      return {
        loginName: [{ required: true, message: this.$t('placeholder.enterUsername'), trigger: 'change' } ],
        password: [{ required: true, message: this.$t('placeholder.enterPassword'), trigger: 'change' }]
        }
    },
  },
  data: () => ({
    serverTitle: "",
@@ -81,12 +94,7 @@
      rememberMe: false
    },
    nullRule: {},
    rules: {
      loginName: [
        { required: true, message: '请输入用户名', trigger: 'change' }
      ],
      password: [{ required: true, message: '请输入密码', trigger: 'change' }]
    },

    loading: '',
    vLoading: false,
    currentHeight: 1057,
@@ -259,6 +267,13 @@
  color: #6170e1;
  letter-spacing: 6.15px;
}
.lang-select {
  float: right;
  color: white !important;
  font-size: 14px;
  margin: 13px;
  cursor: pointer;
}
.left-bg {
  position: absolute;
  top: 29%;

 src/pages/index/main.ts

@@ -1,13 +1,18 @@
import Vue from 'vue';
import App from './App.vue';
import Vue from 'vue'
import App from './App.vue'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/element-variables.scss";
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/css/element-variables.scss'

Vue.use(ElementUI)
import i18n from '@/lang'

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value),
})

new Vue({
  el: '#app',
  render: h => h(App)
  i18n,
  render: (h) => h(App),
})

 src/pages/library/components/carList.vue

@@ -1515,8 +1515,8 @@
    }
  }
  .plateAttach {
    width: calc(100% -40px);
    height: calc(100% -40px);
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    padding: 20px;
    p {
      margin-top: 20px;

 vue.config.js

@@ -41,7 +41,7 @@
})

// const serverUrl = "http://58.118.225.79:41243" // 羊五
const serverUrl = "http://192.168.20.117:7009"
const serverUrl = "http://192.168.20.189:7009"

module.exports = {
  pages,