現(xiàn)(1): 所需工具配置)
項(xiàng)目結(jié)構(gòu)mock/├── index.ts # Mock 入口└── modules/└── index.ts # 登錄 Mock 數(shù)據(jù)src/├── utils/│ ├── request.ts # Axios 封裝│├── api/│ ├── modules/│ └── auth.ts # 認(rèn)證工具,放了登陸相關(guān)接口││└── store/└── modules/└── user.ts # 用戶狀態(tài)管理└── index.ts1.引入Pinianpm install pinia2.引入mock、axios:npm install vite-plugin-mock -Dnpm install mockjsnpm install axios配置mockvite.config.tsimport { defineConfig } from vite import vue from vitejs/plugin-vue // 引入自動導(dǎo)入組件插件 import Components from unplugin-vue-components/vite // 引入 Ant Design Vue的解析器 import { AntDesignVueResolver } from unplugin-vue-components/resolvers // 引入mock import { viteMockServe } from vite-plugin-mock import path from path // https://vite.dev/config/ export default defineConfig({ plugins: [ vue(), Components({ resolvers: [ AntDesignVueResolver({ // 按需加載樣式 importStyle: false, // 如果需要加載圖標(biāo)庫可以開啟 resolveIcons: true }) ] }), viteMockServe({ mockPath: mock, // mock文件存放目錄 enable: true, // 是否啟用mock logger: true // 控制臺顯示請求日志 }) ] })3. npm install types/node配置上路徑(vite.vonfig.ts中與plugins同級)resolve: { alias: { : path.resolve(__dirname, ./src) } }// tsconfig.node.json { compilerOptions: { ...其他配置 baseUrl: ., paths: { /*: [./src/*] } }, include: [vite.config.ts] }// tsconfig.app.json { compilerOptions: { ...其他配置 baseUrl: ., paths: { /*: [./src/*] } }, include: [src/**/*.ts, src/**/*.tsx, src/**/*.vue] }最后按照項(xiàng)目結(jié)構(gòu)加上對應(yīng)的文件夾和文件