feat: 新增@vitejs/plugin-legacy，对 ie11 以上浏览器的兼容打包处理,更新npm包

.env.legacy

@@ -0,0 +1 @@
+NODE_ENV=production

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.9.0(2022-01-27)
+
+### Features
+
+- 增加 LICENSE 证书
+- 新增@vitejs/plugin-legacy，对 ie11 以上浏览器的兼容打包处理
+- 更新 npm 包
+
 ## 0.8.0(2022-01-21)
 
 ### Features

log.md

@@ -12,5 +12,6 @@
 - [x] 引入 prettier 格式化代码
 - [x] 引入 env 环境变量
 - [x] 增加一些常用的构建脚本命令
+- [x] 增加对 ie11 以上浏览器的兼容打包处理
 - [ ] 构建编译的代码压缩和优化
 - [ ] 编写 README

package.json

@@ -1,10 +1,11 @@
 {
   "name": "vite-template",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "build:test": "vue-tsc --noEmit && vite build --mode test",
+    "build:legacy": "vue-tsc --noEmit && vite build --mode legacy",
     "preview": "vite preview",
     "lint": "eslint --cache \"src/**/*.{vue,ts,tsx}\" --fix",
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
@@ -29,20 +30,21 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.0.1",
-    "@vueuse/core": "^7.5.3",
-    "ant-design-vue": "^3.0.0-beta.7",
+    "@vueuse/core": "^7.5.5",
+    "ant-design-vue": "^3.0.0-beta.8",
     "axios": "^0.24.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.9",
-    "vue": "^3.2.27",
+    "vue": "^3.2.29",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@types/node": "^16.11.21",
     "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
-    "@vitejs/plugin-vue": "^2.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
+    "@vitejs/plugin-legacy": "^1.6.4",
+    "@vitejs/plugin-vue": "^2.1.0",
     "@vitejs/plugin-vue-jsx": "^1.3.3",
     "@vue/eslint-config-typescript": "^9.1.0",
     "commitizen": "^4.2.4",
@@ -51,10 +53,10 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-define-config": "^1.2.3",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.3.0",
+    "eslint-plugin-vue": "^8.4.0",
     "husky": "^7.0.4",
     "less": "^4.1.2",
-    "lint-staged": "^12.2.2",
+    "lint-staged": "^12.3.2",
     "prettier": "^2.5.1",
     "typescript": "^4.5.5",
     "unplugin-auto-import": "^0.5.11",

src/components.d.ts

@@ -7,6 +7,9 @@ declare module 'vue' {
     AAvatar: typeof import('ant-design-vue/es')['Avatar'];
     AButton: typeof import('ant-design-vue/es')['Button'];
     ADropdown: typeof import('ant-design-vue/es')['Dropdown'];
+    AForm: typeof import('ant-design-vue/es')['Form'];
+    AFormItem: typeof import('ant-design-vue/es')['FormItem'];
+    AInput: typeof import('ant-design-vue/es')['Input'];
     ALayout: typeof import('ant-design-vue/es')['Layout'];
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent'];
     ALayoutFooter: typeof import('ant-design-vue/es')['LayoutFooter'];
@@ -18,6 +21,7 @@ declare module 'vue' {
     ASpin: typeof import('ant-design-vue/es')['Spin'];
     HelloWorld: typeof import('./components/HelloWorld.vue')['default'];
     InitLoading: typeof import('./components/InitLoading/index.vue')['default'];
+    LockOutlined: typeof import('@ant-design/icons-vue')['LockOutlined'];
     UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined'];
   }
 }

src/layouts/app/Header.vue

@@ -36,6 +36,7 @@
   import { message } from 'ant-design-vue';
   import { AppStore } from '@/store/modules/app';
   import { EnumPage } from '@/router/base';
+  import type { MenuProps } from 'ant-design-vue';
 
   const store = AppStore();
   const router = useRouter();
@@ -61,8 +62,8 @@
     key: number;
   }
 
-  const menuClickHandle = ({ key }: menuClickParams) => {
-    switch (key) {
+  const menuClickHandle: MenuProps['onClick'] = e => {
+    switch (e.key) {
       case EnumUserDropdown.center:
         message.info('个人中心');
         break;

vite.config.ts

@@ -1,4 +1,4 @@
-import { UserConfig, ConfigEnv, defineConfig } from 'vite';
+import { UserConfig, ConfigEnv } from 'vite';
 import { resolve } from 'path';
 import { createVitePlugins } from './vite/plugin';
 import { generateModifyVars } from './vite/themeConfig';
@@ -42,7 +42,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       // TODO:
       chunkSizeWarningLimit: 2000
     },
-    plugins: createVitePlugins(isBuild),
+    plugins: createVitePlugins(isBuild, mode),
     server: {
       hmr: {
         // 禁用服务器错误的遮罩层

vite/plugin.ts

@@ -1,27 +1,30 @@
-import type { Plugin } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
+import type { Plugin } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 import Components from 'unplugin-vue-components/vite';
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
 import AutoImport from 'unplugin-auto-import/vite';
+import legacy from '@vitejs/plugin-legacy';
 
-export function createVitePlugins(isBuild: boolean): Plugin[] {
-  return [
+export function createVitePlugins(isBuild: boolean, mode: string): Plugin[] {
+  const plugins = [
     vue(),
     vueJsx(),
     Components({
       dirs: ['src/components'],
       extensions: ['vue'],
       deep: true,
-      resolvers: [AntDesignVueResolver({
-        // 用于less变更主题用
-        importStyle: 'less',
-        /**
-         * resolve `ant-design-vue' icons
-         * requires package `@ant-design/icons-vue`
-         */
-        resolveIcons: true
-      })],
+      resolvers: [
+        AntDesignVueResolver({
+          // 用于less变更主题用
+          importStyle: 'less',
+          /**
+           * resolve `ant-design-vue' icons
+           * requires package `@ant-design/icons-vue`
+           */
+          resolveIcons: true
+        })
+      ],
       dts: 'src/components.d.ts'
     }),
     AutoImport({
@@ -34,5 +37,14 @@ export function createVitePlugins(isBuild: boolean): Plugin[] {
       ],
       dts: 'src/auto-imports.d.ts'
     })
-  ]
+  ];
+  if (isBuild && mode === 'legacy') {
+    plugins.push(
+      legacy({
+        targets: ['ie >= 11'],
+        additionalLegacyPolyfills: ['regenerator-runtime/runtime']
+      })
+    );
+  }
+  return plugins;
 }