我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章

前言

Vite今年7月份正式发布3.0.0版本。前面的教程是以2.x版本为主。本章会将项目相关依赖版本提升到最新版本。

推荐阅读

• vite.config.ts 之 Env 篇 (十)

依赖版本升级 篇 (十一)

Vite升级

Vite 插件版本如下：

插件失效

vite-plugin-optimize-persist 已弃用

vite-plugin-package-config 没有存在的价值

@vitejs/plugin-legacy

V2.1.0 变化 必须安装 Terser

package.json 配置

 {
  "name": "admin-jujin",
  "private": true,
  "version": "0.1.0",
  "author": {
    "name": "SunHongYu",
    "email": "17600616235@163.com",
    "url": "https://juejin.cn/"
  },
  "resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
  },
  "pnpm": {
    "peerDependencyRules": {
      "ignoreMissing": [
        "rollup",
        "webpack"
      ]
    }
  },
  "scripts": {
    "bootstrap": "pnpm install",
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "npm run build && vite preview",
    "preview:dist": "vite preview",
    "lint:eslint": "eslint {config,src}/**/*.{vue,js,ts,tsx} --fix",
    "lint:prettier": "prettier {config,src}/**/*.{html,md,vue,js,ts,tsx,css,scss,sass,less} --write",
    "clean": "rimraf node_modules dist",
    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
    "prepare": "husky install",
    "preinstall": "npx only-allow pnpm"
  },
  "dependencies": {
    "element-plus": "^2.2.16",
    "mockjs": "^1.1.0",
    "vue": "^3.2.38"
  },
  "devDependencies": {
    "@commitlint/cli": "^16.2.1",
    "@commitlint/config-conventional": "^16.2.1",
    "@iconify-json/ri": "^1.1.1",
    "@iconify/vue": "^3.2.1",
    "@types/lodash-es": "^4.17.6",
    "@typescript-eslint/eslint-plugin": "^5.36.2",
    "@typescript-eslint/parser": "^5.36.2",
    "@vitejs/plugin-legacy": "^2.1.0",
    "@vitejs/plugin-vue": "^3.1.0",
    "@vitejs/plugin-vue-jsx": "^2.0.1",
    "@vue/compiler-sfc": "^3.2.38",
    "@vue/eslint-config-prettier": "^7.0.0",
    "consola": "^2.15.3",
    "eslint": "^8.23.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.4.0",
    "husky": "^8.0.1",
    "lint-staged": "^13.0.3",
    "prettier": "^2.7.1",
    "rimraf": "^3.0.2",
    "sass": "^1.54.8",
    "sass-loader": "^13.0.2",
    "terser": "^5.15.0",
    "typescript": "^4.7.4",
    "unplugin-auto-import": "^v0.11.2",
    "unplugin-icons": "^0.14.9",
    "unplugin-vue-components": "^0.22.4",
    "vite": "^3.1.0",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-imagemin": "^0.6.1",
    "vite-plugin-mock": "^2.9.6",
    "vite-plugin-style-import": "^2.0.0",
    "vite-plugin-vue-setup-extend": "^0.4.0",
    "vue-global-api": "^0.4.1",
    "vue-tsc": "^0.40.7"
  },
  "lint-staged": {
    "src/**/*.{js,ts,tsx,jsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ],
    "package.json": [
      "prettier --write"
    ],
    "src/**/*.vue": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
    "src/**/*.{vue,css,scss,sass,less}": [
      "prettier --write",
      "git add"
    ],
    "*.md": [
      "prettier --write",
      "git add"
    ]
  }
}

Vue、Vite、Element-plus、Eslint、Typescript、Unplugin、Sass等依赖版本已更新到最新版，暂时去除Stylelint、Postcss等依赖和相关配置文件

Plugin配置

// index.ts
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
import { configMockPlugin } from './mock'
import { configCompressPlugin } from './compress'
import { configImageminPlugin } from './imagemin'
import { configStyleImportPlugin } from './style'
import { configAutoImportPlugin, configVueComponentsPlugin, configVueIconsPlugin } from './unplugin'
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  const {
    VITE_USE_IMAGEMIN,
    VITE_USE_COMPRESS,
    VITE_COMPRESS_DELETE_ORIGIN_FILE,
    VITE_USE_MOCK,
    VITE_LEGACY,
  } = viteEnv
  const plugins = [
    vue(),
    vueSetupExtend(),
    // 是否为打包后的文件提供传统浏览器兼容性支持
    VITE_LEGACY
      ? legacy({
          targets: ['ie >= 11'],
          additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
        })
      : null,
  ]
  // vite-plugin-mock
  VITE_USE_MOCK && plugins.push(configMockPlugin(isBuild))
  if (isBuild) {
    // vite-plugin-compress
    VITE_USE_COMPRESS && plugins.push(configCompressPlugin(VITE_COMPRESS_DELETE_ORIGIN_FILE))
    // vite-plugin-imagemin
    VITE_USE_IMAGEMIN && plugins.push(configImageminPlugin())
  }
  // unplugin-auto-import
  plugins.push(configAutoImportPlugin())
  // unplugin-vue-components
  plugins.push(configVueComponentsPlugin())
  // vite-plugin-style-import
  plugins.push(configStyleImportPlugin())
  // unplugin-icons
  plugins.push(configVueIconsPlugin())
  return plugins
}

生成目录

本章最终目录如下：

├─.env
├─.env.development
├─.env.production
├─.eslintignore
├─.eslintrc-auto-import.json
├─.eslintrc.js
├─commitlint.config.js
├─index.html
├─LICENSE
├─package.json
├─pnpm-lock.yaml
├─prettier.config.js
├─README.en.md
├─README.md
├─tsconfig.json
├─vite.config.ts
├─src
|  ├─App.vue
|  ├─env.d.ts
|  ├─main.ts
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   ├─logo.png
|  |   ├─icons
|  |   |   └vuejs-fill.svg
├─public
|   └favicon.ico
├─mock
|  └user.ts
├─config
|   ├─index.ts
|   ├─utils
|   |   └index.ts
|   ├─unplugin
|   |    ├─auto-imports.d.ts
|   |    └components.d.ts
|   ├─server
|   |   └index.ts
|   ├─plugins
|   |    ├─compress.ts
|   |    ├─imagemin.ts
|   |    ├─index.ts
|   |    ├─mock.ts
|   |    ├─style.ts
|   |    └unplugin.ts
|   ├─build
|   |   └index.ts
├─.vscode
|    ├─extensions.json
|    └settings.json
├─.husky
|   ├─commit-msg
|   ├─pre-commit
|   ├─_
|   | └husky.sh

代码已经提交到Gitee

继续学习

废话只说一句：码字不易求个👍，收藏 === 学会,快行动起来吧！🙇‍🙇‍🙇‍。

# Vite+Vue3+TypeScript+Element (十二) 搭建企业级轻量框架实践