mock-server模拟真实请求，可在F12-Network查看,

新增依赖："mockjs": "^1.1.0",
删除依赖："core-js": "^3.6.4",
升级依赖：
"@vue/cli-plugin-babel": "^4.3.1",
"@vue/cli-plugin-eslint": "^4.3.1",
"@vue/cli-service": "^4.3.1",

.env.development

@@ -2,3 +2,14 @@ NODE_ENV='development'
 # must start with VUE_APP_
 VUE_APP_ENV = 'development'
 
+# base api
+VUE_APP_BASE_API = '/dev-api'
+
+# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
+# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
+# It only does one thing by converting all import() to require().
+# This configuration can significantly increase the speed of hot updates,
+# when you have a large number of pages.
+# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

mock/home.js

@@ -0,0 +1,34 @@
+
+const list = [
+  'Vue-cli4',
+  '配置多环境变量',
+  'VantUI 组件按需加载',
+  'Sass 全局样式',
+  'Webpack 4',
+  'Vuex 状态管理',
+  'Axios 封装及接口管理',
+  'Vue-router',
+  'Webpack 4 vue.config.js 基础配置',
+  '配置 proxy 跨域',
+  '配置 alias 别名',
+  '配置 打包分析',
+  '配置 externals 引入 cdn 资源',
+  '去掉 console.log',
+  'splitChunks 单独打包第三方模块',
+  ' 添加 IE 兼容'
+]
+
+exports.default = [
+
+  // mock get all home form server
+  {
+    url: '/home/tagList',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: list
+      }
+    }
+  }
+]

mock/index.js

@@ -0,0 +1,65 @@
+const Mock = require('mockjs')
+
+const home = require('./home')
+
+const mocks = [].concat(home.default)
+
+// for front mock
+// please use it cautiously, it will redefine XMLHttpRequest,
+// which will cause many of your third-party libraries to be invalidated(like progress event).
+
+exports.mockXHR = function mockXHR() {
+  // mock patch
+  // 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
+
+      if (this.responseType) {
+        this.custom.xhr.responseType = this.responseType
+      }
+    }
+    this.proxy_send(...arguments)
+  }
+
+  function XHR2ExpressReqWrap(respond) {
+    return function(options) {
+      let result = null
+      if (respond instanceof Function) {
+        const { body, type, url } = options
+        // https://expressjs.com/en/4x/api.html#req
+        result = respond({
+          method: type,
+          body: JSON.parse(body),
+          query: param2Obj(url)
+        })
+      } else {
+        result = respond
+      }
+      return Mock.mock(result)
+    }
+  }
+
+  for (const i of mocks) {
+    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
+  }
+}
+
+function param2Obj(url) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"')
+        .replace(/\+/g, ' ') +
+      '"}'
+  )
+}
+
+exports.default = mocks

mock/mock-server.js

@@ -0,0 +1,81 @@
+const chokidar = require('chokidar')
+const bodyParser = require('body-parser')
+const chalk = require('chalk')
+const path = require('path')
+const Mock = require('mockjs')
+
+const mockDir = path.join(process.cwd(), 'mock')
+
+function registerRoutes(app) {
+  let mockLastIndex
+  const { default: mocks } = require('./index.js')
+  const mocksForServer = mocks.map(route => {
+    return responseFake(route.url, route.type, route.response)
+  })
+  for (const mock of mocksForServer) {
+    app[mock.type](mock.url, mock.response)
+    mockLastIndex = app._router.stack.length
+  }
+  const mockRoutesLength = Object.keys(mocksForServer).length
+  return {
+    mockRoutesLength: mockRoutesLength,
+    mockStartIndex: mockLastIndex - mockRoutesLength
+  }
+}
+
+function unregisterRoutes() {
+  Object.keys(require.cache).forEach(i => {
+    if (i.includes(mockDir)) {
+      delete require.cache[require.resolve(i)]
+    }
+  })
+}
+
+// for mock server
+const responseFake = (url, type, respond) => {
+  return {
+    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
+    type: type || 'get',
+    response(req, res) {
+      console.log('request invoke:' + req.path)
+      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
+    }
+  }
+}
+
+module.exports = app => {
+  // parse app.body
+  // https://expressjs.com/en/4x/api.html#req.body
+  app.use(bodyParser.json())
+  app.use(bodyParser.urlencoded({
+    extended: true
+  }))
+
+  const mockRoutes = registerRoutes(app)
+  var mockRoutesLength = mockRoutes.mockRoutesLength
+  var mockStartIndex = mockRoutes.mockStartIndex
+
+  // watch files, hot reload mock server
+  chokidar.watch(mockDir, {
+    ignored: /mock-server/,
+    ignoreInitial: true
+  }).on('all', (event, path) => {
+    if (event === 'change' || event === 'add') {
+      try {
+        // remove mock routes stack
+        app._router.stack.splice(mockStartIndex, mockRoutesLength)
+
+        // clear routes cache
+        unregisterRoutes()
+
+        const mockRoutes = registerRoutes(app)
+        mockRoutesLength = mockRoutes.mockRoutesLength
+        mockStartIndex = mockRoutes.mockStartIndex
+
+        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
+      } catch (error) {
+        console.log(chalk.redBright(error))
+      }
+    }
+  })
+}

package.json

@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
-    "core-js": "^3.6.4",
     "lib-flexible": "^0.3.2",
     "lodash": "^4.17.15",
     "regenerator-runtime": "^0.13.5",
@@ -22,9 +21,9 @@
     "vuex": "^3.1.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.2.0",
+    "@vue/cli-plugin-babel": "^4.3.1",
-    "@vue/cli-plugin-eslint": "~4.2.0",
+    "@vue/cli-plugin-eslint": "^4.3.1",
-    "@vue/cli-service": "~4.2.0",
+    "@vue/cli-service": "^4.3.1",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.0.3",
     "babel-plugin-import": "^1.13.0",
@@ -32,6 +31,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.1.2",
+    "mockjs": "^1.1.0",
     "node-sass": "^4.13.1",
     "postcss-pxtorem": "^4.0.1",
     "prettier": "^1.19.1",

src/api/home.js

@@ -1,6 +1,13 @@
-// import qs from 'qs'
+import qs from 'qs'
 // axios
-// import request from '@/utils/request'
+import request from '@/utils/request'
 //home api
 
- 
+// tag list
+export function getTagList() {
+  return request({
+    url: '/dev-api/home/tagList',
+    method: 'get',
+    hideloading: true
+  })
+}

src/config/env.development.js

@@ -2,7 +2,7 @@
 module.exports = {
   title: 'vue-h5-template',
   baseUrl: 'http://localhost:9018', // 项目地址
-  baseApi: 'https://test.xxx.com/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
+  baseApi: '/', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
   APPID: 'xxx',
   APPSECRET: 'xxx',
   $cdn:'https://imgs.solui.cn'

src/main.js

@@ -22,6 +22,21 @@ import 'lib-flexible/flexible.js'
 
 // filters
 import './filters'
+
+/**
+ * If you don't want to use mock-server
+ * you want to use MockJs for mock api
+ * you can execute: mockXHR()
+ *
+ * Currently MockJs will be used in the production environment,
+ * use environment variables to determine is required
+ * ajax request matching rurl is intercepted ! ! !
+ */
+if (process.env.NODE_ENV === 'production') {
+  const { mockXHR } = require('../mock')
+  mockXHR()
+}
+
 Vue.config.productionTip = false
 
 new Vue({

src/views/home/about.vue

@@ -60,6 +60,7 @@ export default {
   }
 }
 </script>
+
 <style lang="scss" scoped>
 .app-container {
   background: #fff;

src/views/home/index.vue

@@ -12,41 +12,34 @@
 </template>
 
 <script>
+import { getTagList } from '@/api/home'
+
 export default {
   data() {
     return {
-      list: [
+      list: []
-        'Vue-cli4',
-        '配置多环境变量',
-        'VantUI 组件按需加载',
-        'Sass 全局样式',
-        'Webpack 4',
-        'Vuex 状态管理',
-        'Axios 封装及接口管理',
-        'Vue-router',
-        'Webpack 4 vue.config.js 基础配置',
-        '配置 proxy 跨域',
-        '配置 alias 别名',
-        '配置 打包分析',
-        '配置 externals 引入 cdn 资源',
-        '去掉 console.log',
-        'splitChunks 单独打包第三方模块',
-        '添加 IE 兼容',
-        'Eslint+Pettier 统一开发规范'
-
-      ]
     }
   },
 
   computed: {
+
   },
 
-  mounted() {
+  created() {
+    this.getTagList()
   },
 
-  methods: {}
+  mounted() {},
+
+  methods: {
+    async getTagList() {
+      const res = await getTagList()
+      this.list = res.data
+    }
+  }
 }
 </script>
+
 <style lang="scss" scoped>
 .app-container {
   .warpper {

vue.config.js

@@ -50,7 +50,8 @@ module.exports = {
       //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
       warnings: false,
       errors: true
-    }
+    },
+    before: require('./mock/mock-server.js')
     // proxy: {
     //   //配置跨域
     //   '/api': {