配置文件

config/dev.env.js

@@ -1,8 +1,9 @@
 'use strict'
 const merge = require('webpack-merge')
 const prodEnv = require('./prod.env')
+const testEnv = require('./test.env')
 
-module.exports = merge(prodEnv, {
+module.exports = merge(prodEnv, testEnv, {
   NODE_ENV: '"development"',
   BASE_API: '"http://localhost:8000"',
   // BASE_API: '"http://139.224.54.200:8888"'

config/index.js

@@ -2,8 +2,8 @@
 // Template version: 1.2.6
 const devEnv = require('./dev.env')
 // 获取接口地址
-const base_url = devEnv.BASE_API.replace(/"/g,'')
+const base_url = devEnv.BASE_API.replace(/"/g, '')
-console.log(base_url )
+console.log(base_url)
 const path = require('path')
 module.exports = {
   dev: {

config/prod.env.js

@@ -1,7 +1,8 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
- //  BASE_API: '"http://139.224.54.200:8000"',
+  //  BASE_API: '"http://139.224.54.200:8000"',
-BASE_API: '"http://139.224.54.200:8888"',
+  BASE_API: '"http://139.224.54.200:8888"',
+  NAME: '"生产"'
   // BASE_API: '"http://139.224.57.82:8015"'
 }

config/test.env.js

@@ -3,5 +3,6 @@ module.exports = {
   NODE_ENV: '"production"',
   //  BASE_API: '"http://139.224.54.200:8000"',
   // BASE_API: '"http://139.224.54.200:8888"',
-  BASE_API: '"http://139.224.57.82:8015"'
+  BASE_API: '"http://139.224.57.82:8015"',
+  NAME: '"测试"'
 }

src/store/getters.js

@@ -12,6 +12,7 @@ const getters = {
   socketApi: state => state.api.socketApi,
   imagesUploadApi: state => state.api.imagesUploadApi,
   baseApi: state => state.api.baseApi,
+  name: state => state.api.name,
   fileUploadApi: state => state.api.fileUploadApi,
   updateAvatarApi: state => state.api.updateAvatarApi,
   qiNiuUploadApi: state => state.api.qiNiuUploadApi,

src/store/modules/api.js

@@ -1,4 +1,5 @@
 const baseUrl = process.env.BASE_API
+const name = process.env.NAME
 const api = {
   state: {
     // 实时控制台
@@ -16,7 +17,8 @@ const api = {
     // 文件上传
     fileUploadApi: baseUrl + '/api/localStorage',
     // baseUrl，
-    baseApi: baseUrl
+    baseApi: baseUrl,
+    name: name
   }
 }
 

src/views/login.vue

@@ -1,20 +1,23 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px"
-      <h3 class="title">襄岳科技</h3>
+      class="login-form">
+      <h3 class="title">襄岳科技-{{ name }}</h3>
       <el-form-item prop="username">
         <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
+          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
+        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
+          @keyup.enter.native="handleLogin">
+          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="code">
-        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
+        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
+          @keyup.enter.native="handleLogin">
+          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
         </el-input>
         <div class="login-code">
           <img :src="codeUrl" @click="getCode">
@@ -22,7 +25,8 @@
       </el-form-item>
       <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住我</el-checkbox> -->
       <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
+        <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
+          @click.native.prevent="handleLogin">
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
@@ -30,7 +34,7 @@
     </el-form>
     <!--  底部  -->
     <div v-if="$store.state.settings.showFooter" id="el-login-footer">
-      <span v-html="$store.state.settings.footerTxt"/>
+      <span v-html="$store.state.settings.footerTxt" />
       <span> ⋅ </span>
       <a href="http://www.beian.miit.gov.cn" target="_blank">{{ $store.state.settings.caseNumber }}</a>
     </div>
@@ -40,8 +44,10 @@
 <script>
 import { encrypt } from '@/utils/rsaEncrypt'
 import Config from '@/config'
+import { mapGetters } from "vuex";
 import { getCodeImg } from '@/api/login'
 import Cookies from 'js-cookie'
+
 export default {
   name: 'Login',
   data() {
@@ -66,7 +72,7 @@ export default {
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect
       },
       immediate: true
@@ -76,6 +82,11 @@ export default {
     this.getCode()
     this.getCookie()
   },
+  computed: {
+    ...mapGetters([
+      'name'
+    ])
+  },
   methods: {
     getCode() {
       getCodeImg().then(res => {
@@ -123,7 +134,7 @@ export default {
           this.$store.dispatch('Login', user).then(() => {
             this.loading = false
             this.$router.push({ path: this.redirect || '/' })
-            localStorage.setItem('name',user.username);
+            localStorage.setItem('name', user.username);
           }).catch(() => {
             this.loading = false
             this.getCode()
@@ -139,49 +150,58 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .login {
+.login {
-    /**/
+  /**/
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
-    height: 100%;
+  height: 100%;
-    background-image: url("../assets/imgs/login_bg.jpg");
+  background-image: url("../assets/imgs/login_bg.jpg");
-    background-size: cover;
+  background-size: cover;
-  }
+}
-  .title {
+
-    margin: 0px auto 30px auto;
+.title {
-    text-align: center;
+  margin: 0px auto 30px auto;
-    color: #707070;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 385px;
+  padding: 25px 25px 5px 25px;
+
+  .el-input {
+    height: 38px;
+
+    input {
+      height: 38px;
+    }
   }
 
-  .login-form {
+  .input-icon {
-    border-radius: 6px;
+    height: 39px;
-    background: #ffffff;
+    width: 14px;
-    width: 385px;
+    margin-left: 2px;
-    padding: 25px 25px 5px 25px;
-    .el-input {
-      height: 38px;
-      input {
-        height: 38px;
-      }
-    }
-    .input-icon{
-      height: 39px;width: 14px;margin-left: 2px;
-    }
   }
-  .login-tip {
+}
-    font-size: 13px;
+
-    text-align: center;
+.login-tip {
-    color: #bfbfbf;
+  font-size: 13px;
-  }
+  text-align: center;
-  .login-code {
+  color: #bfbfbf;
-    width: 33%;
+}
-    display: inline-block;
+
-    height: 38px;
+.login-code {
-    float: right;
+  width: 33%;
-    img{
+  display: inline-block;
-      cursor: pointer;
+  height: 38px;
-      vertical-align:middle
+  float: right;
-    }
+
+  img {
+    cursor: pointer;
+    vertical-align: middle
   }
+}
 </style>