依赖包推荐 ~

本地服务

• 安装：npm i http-server -g 或 npm i serve -g
• http-server：http-server -p 8080 / serve：serve dist

---

包文件版本检测

• 安装：npm i -g npm-check
• 查看可迭代的依赖项：npm-check -u（ Non-Semver 表示主版本更新存在风险）

---

json-server

• 安装 ：npm i json-server -g
• 下载 postman
• 创建 __mock__ 文件夹 / db.json
• 启动服务 json-server --watch db.json

"scripts": {
  "json": "json-server __mock__/db.json --watch",
},

---

vite mock

• 安装：pnpm add mockjs / pnpm add vite-plugin-mock@2.9.6 -D
• vite.config

import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
  plugins: [
    viteMockServe({
      mockPath: 'mock', // 模拟接口数据的文件存放在项目根目录下的 ‘mock’ 文件夹中。
      enable: true // 是否启用模拟接口数据
    })
  ]
})

• 根目录创建 mock 文件夹 > test.ts

import type { MockMethod } from 'vite-plugin-mock'
import fs from 'fs'
import path from 'path'
// 模拟数据
export default [
  {
    url: '/api/get',
    method: 'get',
    response: () => {
      return {
        code: 0,
        data: {
          name: 'zs'
        }
      }
    }
  }
] as MockMethod[]

• 启动项目访问 /api/get

---

vite pwa

• 安装： pnpm i vite-plugin-pwa -D
• vite.config

import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
	plugins: [
	  VitePWA()
	]
})

• env.d.ts

/// <reference types="vite-plugin-pwa/client" />

• 演示

import { registerSW } from 'virtual:pwa-register'
onMounted(() => {
  registerSW({
    immediate: true, // 立即注册
    // pwa 注册完成 回调
    onRegisteredSW(url, reg) {},
    // 提示文件需要更新
    onNeedRefresh() {
      console.log('need refresh')
    }
  })
})

• 打包构建：registerSW.js 注册 serviceWorker 文件（sw.js：记录文件信息）