mock数据 配置调整

Author: jiangjun123

mock/user.js

@@ -0,0 +1,16 @@
+export default [
+  {
+    url: '/api/getUers',
+    method: 'get',
+    response: () => {
+      return {
+        code: 200,
+        message: 'success',
+        data: {
+          userId: 'sdf2223',
+          userName: '小胡',
+        },
+      };
+    },
+  },
+];

package.json

@@ -4,7 +4,7 @@
   "author": "hu-snail",
   "scripts": {
     "lint": "eslint \"src/**/*.{js,vue}\"",
-    "dev": "vite  --mode development",
+    "dev": "cross-env NODE_ENV=development vite",
     "build": "vite build --mode production",
     "preview": "npm run build && vite preview",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "element-plus": "^1.0.2-beta.65",
+    "mockjs": "^1.1.0",
     "vue": "^3.0.5",
     "vue-router": "^4.0.10",
     "vuex": "^4.0.2"
@@ -25,15 +26,14 @@
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/compiler-sfc": "^3.0.5",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "amfe-flexible": "^2.2.1",
     "autoprefixer": "^10.3.1",
     "babel-eslint": "^10.1.0",
+    "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.15.0",
     "lint-staged": "^11.1.1",
     "postcss": "^8.3.6",
-    "postcss-pxtorem": "^6.0.0",
     "prettier": "^2.3.2",
     "sass": "^1.37.0",
     "stylelint": "^13.13.1",
@@ -42,6 +42,7 @@
     "stylelint-config-standard": "^22.0.0",
     "vite": "^2.4.4",
     "vite-plugin-babel-import": "^2.0.5",
+    "vite-plugin-mock": "^2.9.4",
     "vite-plugin-style-import": "^1.0.1"
   }
 }

postcss.config.js

@@ -12,11 +12,5 @@ module.exports = {
       ],
       grid: true,
     },
-    'postcss-pxtorem': {
-      rootValue: 75,
-      propList: ['*'],
-      selectorBlackList: ['.el'],
-      unitPrecision: 5,
-    },
   },
 };

src/api/user.js

@@ -0,0 +1,5 @@
+import request from '@/utils/request.js';
+
+export const getUser = () => {
+  return request({ url: '/getUers', method: 'get' });
+};

src/components/HelloWorld.vue

@@ -15,12 +15,23 @@
 
 <script setup>
   import { onBeforeMount, defineProps } from 'vue';
+  import { getUser } from '@/api/user.js';
   onBeforeMount(() => {
-    console.log(2);
+    getUserInfo();
   });
   defineProps({
     msg: String,
   });
+
+  const getUserInfo = async () => {
+    getUser()
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
 </script>
 
 <style lang="scss" scoped>

src/config/index.js

@@ -1,8 +1 @@
-/**
- * @description 导出配置信息
- * @author hu-snail [email protected]
- */
-import netConfig from './net.config';
-import setting from './setting';
-
-module.exports = Object.assign({}, netConfig, setting);
+// ...

src/config/net.config.js

@@ -3,9 +3,9 @@
  * @author hu-snail [email protected]
  */
 
-export default {
+export const netConfig = {
   // axios 基础url地址
-  baseURL: process.env.NODE_ENV === 'development' ? 'https://xxx/api' : 'https://xxx/api',
+  baseURL: process.env.NODE_ENV === 'development' ? 'http://localhost:8089/api' : 'https://xxx/api',
   // 为开发服务器配置 CORS。默认启用并允许任何源，传递一个 选项对象 来调整行为或设为 false 表示禁用
   cors: true,
   // 根据后端定义配置

src/config/setting.js

@@ -4,7 +4,7 @@
  * vite相关的配置文件参考 https://cn.vitejs.dev/config/#define
  */
 
-export default {
+export const setting = {
   //项目部署的基础路径
   base: './',
   // 静态资源服务的文件夹 类型 string | false

src/plugin/index.JS

@@ -1 +1 @@
-import 'amfe-flexible/index.js';
+// import 'amfe-flexible/index.js';

src/utils/request.js

@@ -1,16 +1,9 @@
-import Vue from 'vue';
 import axios from 'axios';
-import {
-  baseURL,
-  contentType,
-  invalidCode,
-  noPermissionCode,
-  requestTimeout,
-  successCode,
-} from '@/config/index.js';
-
-import store from '@/store';
-import router from '@/router';
+import { netConfig } from '@/config/net.config';
+const { baseURL, contentType, invalidCode, noPermissionCode, requestTimeout, successCode } =
+  netConfig;
+import store from '@/store/index.js';
+import router from '@/router/index.js';
 import { ElMessageBox, ElMessage } from 'element-plus';
 
 // eslint-disable-next-line no-unused-vars
@@ -42,7 +35,8 @@ const handleCode = (code, msg) => {
       router.push({ path: '/401' }).catch(() => {});
       break;
     default:
-      Vue.prototype.$baseMessage(msg || `后端接口${code}异常`, 'error');
+      console.log(msg);
+      // Vue.prototype.$baseMessage(msg || `后端接口${code}异常`, 'error');
       break;
   }
 };

vite.config.js

@@ -3,8 +3,9 @@ const path = require('path');
 import vue from '@vitejs/plugin-vue';
 import styleImport from 'vite-plugin-style-import';
 import legacy from '@vitejs/plugin-legacy';
-
-import {
+import { viteMockServe } from 'vite-plugin-mock';
+import { setting } from './src/config/setting';
+const {
   base,
   publicDir,
   outDir,
@@ -21,8 +22,7 @@ import {
   clearScreen,
   drop_console,
   drop_debugger,
-} from './src/config/index.js';
-
+} = setting;
 // https://vitejs.dev/config/
 export default defineConfig({
   root: process.cwd(),
@@ -52,6 +52,9 @@ export default defineConfig({
         },
       ],
     }),
+    viteMockServe({
+      supportTs: false,
+    }),
   ],
 
   server: {
@@ -72,11 +75,6 @@ export default defineConfig({
   },
 
   css: {
-    css: {
-      postcss: {
-        plugins: [require('autoprefixer')],
-      },
-    },
     preprocessorOptions: {
       // 引入公用的样式
       scss: {
@@ -86,6 +84,7 @@ export default defineConfig({
   },
 
   build: {
+    target: 'es2015',
     outDir,
     assetsDir,
     sourcemap,
@@ -100,10 +99,12 @@ export default defineConfig({
     },
     terserOptions: {
       compress: {
+        keep_infinity: true,
         drop_console,
         drop_debugger,
       },
     },
+    chunkSizeWarningLimit: 2000,
   },
 
   optimizeDeps: {