feat: perfect migrate to @vue/cli-service, upgrade vue babel version (#1267)

* feat: perfect migrate to @vue/cli-service, upgrade vue babel version

1. update to @vue/cli-service@3.0.5, @babel/core@7.0.0
2. use vue-cli service replace config file in build/ and config/
3. upgrade vue and babel configuration
4. solve the svg-sprite config problem #980

refs: #932 #1087  #980 #1056

* fix: fix breadcrumb dependency

* fix: fix index template and static assets load with vue-cli 3

* fix: fix import driver.js in guide page

* refactor(mock): mak mock api compatible with both web-view and webpack server

1. 把 Mockjs 功能移到 server 端中间件，同时也兼容前端直接劫持 XHR
2. dev 环境下默认作为 express 中间件通过 webpack server 提供 mock api
3. prod 构建时，默认在前端用 Mockjs 劫持 XHR

benefits:
  - dev 开发调试时能直接看到 XHR 请求，方便调试网络，能和后端对接联调
  - 避开在开发时因为 Mockjs 引起的网络 bug
  - prod 构建时劫持 XHR，保证本项目的 Github Pages preview 能正常显示 (逻辑和 error-log 一样)
  - 前后台使用的 mock 是同一份代码，不会增加维护负担

ref: [#562](https://github.com/PanJiaChen/vue-element-admin/issues/562#issuecomment-378116233)

* update requires the lowest version of node

* add favicon

* fix(TreeTable): fix `Array.prototype.concat` on custom-tree-table page

src/components/TreeTable/index.vue

@@ -61,7 +61,7 @@ export default {
         tmp = this.data
       }
       const func = this.evalFunc || treeToArray
-      const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
+      const args = this.evalArgs ? [].concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
       return func.apply(null, args)
     }
   },

src/main.js

@@ -17,10 +17,14 @@ import i18n from './lang' // Internationalization
 import './icons' // icon
 import './errorLog' // error log
 import './permission' // permission control
-import './mock' // simulation data
 
 import * as filters from './filters' // global filters
 
+import { mockXHR } from '../mock' // simulation data
+
+// mock api in github pages site build
+if (process.env.NODE_ENV === 'production') { mockXHR() }
+
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)

src/mock/article.js

@@ -1,70 +0,0 @@
-import Mock from 'mockjs'
-import { param2Obj } from '@/utils'
-
-const List = []
-const count = 100
-
-const baseContent = '<p>我是测试数据我是测试数据</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
-const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
-
-for (let i = 0; i < count; i++) {
-  List.push(Mock.mock({
-    id: '@increment',
-    timestamp: +Mock.Random.date('T'),
-    author: '@first',
-    reviewer: '@first',
-    title: '@title(5, 10)',
-    content_short: '我是测试数据',
-    content: baseContent,
-    forecast: '@float(0, 100, 2, 2)',
-    importance: '@integer(1, 3)',
-    'type|1': ['CN', 'US', 'JP', 'EU'],
-    'status|1': ['published', 'draft', 'deleted'],
-    display_time: '@datetime',
-    comment_disabled: true,
-    pageviews: '@integer(300, 5000)',
-    image_uri,
-    platforms: ['a-platform']
-  }))
-}
-
-export default {
-  getList: config => {
-    const { importance, type, title, page = 1, limit = 20, sort } = param2Obj(config.url)
-
-    let mockList = List.filter(item => {
-      if (importance && item.importance !== +importance) return false
-      if (type && item.type !== type) return false
-      if (title && item.title.indexOf(title) < 0) return false
-      return true
-    })
-
-    if (sort === '-id') {
-      mockList = mockList.reverse()
-    }
-
-    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
-
-    return {
-      total: mockList.length,
-      items: pageList
-    }
-  },
-  getPv: () => ({
-    pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
-  }),
-  getArticle: (config) => {
-    const { id } = param2Obj(config.url)
-    for (const article of List) {
-      if (article.id === +id) {
-        return article
-      }
-    }
-  },
-  createArticle: () => ({
-    data: 'success'
-  }),
-  updateArticle: () => ({
-    data: 'success'
-  })
-}

src/mock/index.js

@@ -1,39 +0,0 @@
-import Mock from 'mockjs'
-import loginAPI from './login'
-import articleAPI from './article'
-import remoteSearchAPI from './remoteSearch'
-import transactionAPI from './transaction'
-
-// 修复在使用 MockJS 情况下，设置 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
-// https://github.com/nuysoft/Mock/issues/300
-Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
-Mock.XHR.prototype.send = function() {
-  if (this.custom.xhr) {
-    this.custom.xhr.withCredentials = this.withCredentials || false
-  }
-  this.proxy_send(...arguments)
-}
-
-// Mock.setup({
-//   timeout: '350-600'
-// })
-
-// 登录相关
-Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
-Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
-Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)
-
-// 文章相关
-Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
-Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)
-Mock.mock(/\/article\/pv/, 'get', articleAPI.getPv)
-Mock.mock(/\/article\/create/, 'post', articleAPI.createArticle)
-Mock.mock(/\/article\/update/, 'post', articleAPI.updateArticle)
-
-// 搜索相关
-Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)
-
-// 账单相关
-Mock.mock(/\/transaction\/list/, 'get', transactionAPI.getList)
-
-export default Mock

src/mock/login.js

@@ -1,34 +0,0 @@
-import { param2Obj } from '@/utils'
-
-const userMap = {
-  admin: {
-    roles: ['admin'],
-    token: 'admin',
-    introduction: '我是超级管理员',
-    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: 'Super Admin'
-  },
-  editor: {
-    roles: ['editor'],
-    token: 'editor',
-    introduction: '我是编辑',
-    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: 'Normal Editor'
-  }
-}
-
-export default {
-  loginByUsername: config => {
-    const { username } = JSON.parse(config.body)
-    return userMap[username]
-  },
-  getUserInfo: config => {
-    const { token } = param2Obj(config.url)
-    if (userMap[token]) {
-      return userMap[token]
-    } else {
-      return false
-    }
-  },
-  logout: () => 'success'
-}

src/mock/remoteSearch.js

@@ -1,24 +0,0 @@
-import Mock from 'mockjs'
-import { param2Obj } from '@/utils'
-
-const NameList = []
-const count = 100
-
-for (let i = 0; i < count; i++) {
-  NameList.push(Mock.mock({
-    name: '@first'
-  }))
-}
-NameList.push({ name: 'mockPan' })
-
-export default {
-  searchUser: config => {
-    const { name } = param2Obj(config.url)
-    const mockNameList = NameList.filter(item => {
-      const lowerCaseName = item.name.toLowerCase()
-      if (name && lowerCaseName.indexOf(name.toLowerCase()) < 0) return false
-      return true
-    })
-    return { items: mockNameList }
-  }
-}

src/mock/transaction.js

@@ -1,23 +0,0 @@
-import Mock from 'mockjs'
-
-const List = []
-const count = 20
-
-for (let i = 0; i < count; i++) {
-  List.push(Mock.mock({
-    order_no: '@guid()',
-    timestamp: +Mock.Random.date('T'),
-    username: '@name()',
-    price: '@float(1000, 15000, 0, 2)',
-    'status|1': ['success', 'pending']
-  }))
-}
-
-export default {
-  getList: () => {
-    return {
-      total: List.length,
-      items: List
-    }
-  }
-}

src/utils/request.js

@@ -5,7 +5,8 @@ import { getToken } from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.BASE_API, // api 的 base_url
+  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
+  withCredentials: true, // 跨域请求时发送 cookies
   timeout: 5000 // request timeout
 })
 

src/views/guide/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import * as Driver from 'driver.js' // import driver.js
+import Driver from 'driver.js' // import driver.js
 import 'driver.js/dist/driver.min.css' // import driver.js css
 import steps from './defineSteps'