Merge pull request #1 from XPoet/dev

Dev

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
     'import/no-absolute-path': 'off',
     'import/no-extraneous-dependencies': 'off',
     'vue/no-multiple-template-root': 'off',
+    'no-console': 'off',
     'no-param-reassign': [
       'error',
       {

mock/test.ts

@@ -0,0 +1,43 @@
+import { MockMethod } from 'vite-plugin-mock'
+
+const mockArr = [
+  {
+    url: '/api/get',
+    method: 'get',
+    response: (res: { query: any }) => {
+      return {
+        code: 0,
+        data: {
+          name: res.query
+        }
+      }
+    }
+  },
+  {
+    url: '/api/post',
+    method: 'post',
+    timeout: 2000,
+    response: {
+      code: 0,
+      data: {
+        name: 'vben'
+      }
+    }
+  },
+  {
+    url: '/api/test',
+    method: 'get',
+    response: (res: { body: any }) => {
+      console.log('mock funciton: /api/test/ ----', res)
+      return {
+        code: 0,
+        message: 'ok',
+        data: {
+          name: 'Mock'
+        }
+      }
+    }
+  }
+]
+
+export default mockArr as MockMethod[]

package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "element-plus": "^1.0.2-beta.36",
+    "mockjs": "^1.1.0",
     "vue": "^3.0.5",
     "vue-router": "^4.0.6",
     "vuex": "^4.0.0"
@@ -72,6 +73,7 @@
     "ts-jest": "^26.5.4",
     "typescript": "^4.1.3",
     "vite": "^2.1.5",
+    "vite-plugin-mock": "^2.5.0",
     "vue-jest": "^5.0.0-alpha.7",
     "vue-tsc": "^0.0.15"
   }

src/components/Nav.vue

@@ -42,6 +42,11 @@ export default defineComponent({
           isActive: false,
           path: '/axios'
         },
+        {
+          name: 'Mock',
+          isActive: false,
+          path: '/mock'
+        },
         {
           name: 'Test',
           isActive: false,

src/mockProdServer.ts

@@ -0,0 +1,11 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
+
+// import your mock.ts
+// you can import only one file if you use vite.mock.config.ts
+// aslo can import.meta.glob to import all files
+import testModule from '../mock/test'
+
+// eslint-disable-next-line import/prefer-default-export
+export function setupProdMockServer() {
+  createProdMockServer([...testModule])
+}

src/router/index.ts

@@ -23,6 +23,11 @@ const routes: Array<RouteRecordRaw> = [
     path: '/test',
     name: 'Test',
     component: Test
+  },
+  {
+    path: '/mock',
+    name: 'Mock',
+    component: () => import('@/views/Mock.vue')
   }
 ]
 

src/utils/axios.ts

@@ -8,13 +8,25 @@ const axios = Axios.create({
   timeout: 20000 // 请求超时 20s
 })
 
+declare module 'axios' {
+  // eslint-disable-next-line no-unused-vars
+  interface AxiosRequestConfig {
+    // add mock switch
+    isMock?: boolean
+  }
+}
+
 // 前置拦截器（发起请求之前的拦截）
 axios.interceptors.request.use(
   (response) => {
     /**
      * 根据你的项目实际情况来对 config 做处理
-     * 这里对 config 不做任何处理，直接返回
      */
+    // mock switch
+    if (response.isMock) {
+      // eslint-disable-next-line no-param-reassign
+      response.baseURL = ''
+    }
     return response
   },
   (error) => {

src/views/Mock.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="mock-container page-container">
+    <div class="page-title">Axios Test Page</div>
+    <div class="user-info-container">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
+            <span>Mock</span>
+            <el-button class="button" type="text" @click="getTestInfo"
+              >Click to get mock
+            </el-button>
+          </div>
+        </template>
+        <div class="info-list-box" v-loading="loading">
+          <div class="text item" v-if="mockInfo?.code">code: {{ mockInfo?.code }}</div>
+          <div class="text item" v-if="mockInfo?.data">data: {{ mockInfo?.data }}</div>
+          <div class="text item" v-if="mockInfo?.message">
+            msg: {{ mockInfo?.message }}
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, Ref } from 'vue'
+import axios from '../utils/axios'
+
+export default defineComponent({
+  name: 'Mock',
+  setup() {
+    const mockInfo: Ref = ref(null)
+    const loading = ref(false)
+
+    const getTestInfo = () => {
+      loading.value = true
+      axios({
+        method: 'get',
+        url: '/api/test',
+        isMock: true
+      })
+        .then((response) => {
+          mockInfo.value = response.data
+          loading.value = false
+        })
+        .catch((error) => {
+          loading.value = false
+          console.error(error)
+        })
+    }
+
+    return {
+      mockInfo,
+      loading,
+      getTestInfo
+    }
+  }
+})
+</script>
+
+<style scoped lang="stylus">
+
+.axios-container {
+
+  .user-info-container {
+    display flex
+    justify-content center
+    width 100%
+
+    .info-list-box {
+      padding 10px
+
+      .text {
+        font-size: 14px;
+      }
+
+      .item {
+        margin-bottom: 18px;
+      }
+
+    }
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .box-card {
+      width: 480px;
+    }
+
+  }
+
+}
+</style>

vite.config.ts

@@ -1,30 +1,47 @@
-import { defineConfig } from 'vite'
+import { UserConfigExport, ConfigEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { viteMockServe } from 'vite-plugin-mock'
 // 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
 import { resolve } from 'path'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
-    }
-  },
-  base: './', // 设置打包路径
-  server: {
-    port: 4500, // 设置服务启动端口号
-    open: true, // 设置服务启动时是否自动打开浏览器
-    cors: true // 允许跨域
+export default ({ command }: ConfigEnv): UserConfigExport => {
+  const prodMock = true
+  return {
+    plugins: [
+      vue(),
+      viteMockServe({
+        mockPath: 'mock',
+        logger: true,
+        localEnabled: command === 'serve',
+        prodEnabled: command !== 'serve' && prodMock,
+        //  这样可以控制关闭mock的时候不让mock打包到最终代码内
+        injectCode: `
+          import { setupProdMockServer } from './mockProdServer';
+          setupProdMockServer();
+        `
+      })
+    ],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
+      }
+    },
+    base: './', // 设置打包路径
+    server: {
+      port: 4500, // 设置服务启动端口号
+      open: true, // 设置服务启动时是否自动打开浏览器
+      cors: true // 允许跨域
 
-    // 设置代理，根据我们项目实际情况配置
-    // proxy: {
-    //   '/api': {
-    //     target: 'http://xxx.xxx.xxx.xxx:x000',
-    //     changeOrigin: true,
-    //     secure: false,
-    //     rewrite: (path) => path.replace('/api/', '/')
-    //   }
-    // },
+      // 设置代理，根据我们项目实际情况配置
+      // proxy: {
+      //   '/api': {
+      //     target: 'http://xxx.xxx.xxx.xxx:x000',
+      //     changeOrigin: true,
+      //     secure: false,
+      //     rewrite: (path) => path.replace('/api/', '/')
+      //   }
+      // },
+    }
   }
-})
+}