feat: 引入新插件和调整vite插件目录

config/vite/plugins/autoImport.ts

@@ -0,0 +1,21 @@
+/**
+ * @name AutoImportDeps
+ * @description 按需加载，自动引入
+ */
+import AutoImport from 'unplugin-auto-import/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+
+export const AutoImportDeps = () => {
+  return AutoImport({
+    dts: 'types/auto-imports.d.ts',
+    imports: [
+      'vue',
+      'pinia',
+      'vue-router',
+      {
+        '@vueuse/core': [],
+      },
+    ],
+    resolvers: [ElementPlusResolver()],
+  });
+};

config/vite/plugins/component.ts

@@ -0,0 +1,20 @@
+/**
+ * @name  AutoRegistryComponents
+ * @description 按需加载，自动引入组件
+ */
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver, VueUseComponentsResolver } from 'unplugin-vue-components/resolvers';
+export const AutoRegistryComponents = () => {
+  return Components({
+    // dirs: ['src/components'],
+    extensions: ['vue', 'md'],
+    deep: true,
+    dts: 'types/components.d.ts',
+    directoryAsNamespace: false,
+    globalNamespaces: [],
+    directives: true,
+    include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+    exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
+    resolvers: [ElementPlusResolver(), VueUseComponentsResolver()],
+  });
+};

config/vite/plugins/compress.ts

@@ -0,0 +1,15 @@
+/**
+ * @name ConfigCompressPlugin
+ * @description 开启.gz压缩
+ */
+import viteCompression from 'vite-plugin-compression';
+
+export const ConfigCompressPlugin = () => {
+  return viteCompression({
+    ext: '.gz',
+    verbose: true,
+    deleteOriginFile: false,
+  });
+
+  return [];
+};

config/vite/plugins/eruda.ts

@@ -0,0 +1,5 @@
+import eruda from 'vite-plugin-eruda';
+
+export const ConfigEruda = () => {
+  return eruda();
+};

config/vite/plugins/index.ts

@@ -0,0 +1,55 @@
+/**
+ * @name createVitePlugins
+ * @description 封装plugins数组统一调用
+ */
+import type { Plugin } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import vueSetupExtend from 'vite-plugin-vue-setup-extend';
+import { ConfigSvgIconsPlugin } from './svgIcons';
+import { AutoRegistryComponents } from './component';
+import { AutoImportDeps } from './autoImport';
+import { ConfigMockPlugin } from './mock';
+import { ConfigCompressPlugin } from './compress';
+import { ConfigPagesPlugin } from './pages';
+import { ConfigRestartPlugin } from './restart';
+import { ConfigProgressPlugin } from './progress';
+import { ConfigEruda } from './eruda';
+import { ConfigStyleImport } from './styleImport';
+
+export function createVitePlugins(isBuild: boolean) {
+  const vitePlugins: (Plugin | Plugin[])[] = [
+    // vue支持
+    vue(),
+    // JSX支持
+    vueJsx(),
+    // setup语法糖组件名支持
+    vueSetupExtend(),
+    // 自动按需引入组件
+    AutoRegistryComponents(),
+    // 自动按需引入依赖
+    AutoImportDeps(),
+    // 自动生成路由
+    ConfigPagesPlugin(),
+    // 开启.gz压缩  rollup-plugin-gzip
+    ConfigCompressPlugin(),
+    // 监听配置文件改动重启
+    ConfigRestartPlugin(),
+    // 构建时显示进度条
+    ConfigProgressPlugin(),
+  ];
+
+  //styleImport
+  vitePlugins.push(ConfigStyleImport());
+
+  // eruda
+  vitePlugins.push(ConfigEruda());
+
+  // vite-plugin-svg-icons
+  vitePlugins.push(ConfigSvgIconsPlugin(isBuild));
+
+  // vite-plugin-mock
+  vitePlugins.push(ConfigMockPlugin(isBuild));
+
+  return vitePlugins;
+}

config/vite/plugins/mock.ts

@@ -0,0 +1,18 @@
+/**
+ * @name ConfigMockPlugin
+ * @description 引入mockjs，本地模拟接口
+ */
+import { viteMockServe } from 'vite-plugin-mock';
+export const ConfigMockPlugin = (isBuild: boolean) => {
+  return viteMockServe({
+    ignore: /^\_/,
+    mockPath: 'mock',
+    localEnabled: !isBuild,
+    prodEnabled: false, //实际开发请关闭，会影响打包体积
+    // https://github.com/anncwb/vite-plugin-mock/issues/9
+    injectCode: `
+       import { setupProdMockServer } from '../mock/_createProdMockServer';
+       setupProdMockServer();
+       `,
+  });
+};

config/vite/plugins/pages.ts

@@ -0,0 +1,13 @@
+/**
+ * @name ConfigPagesPlugin
+ * @description 动态生成路由
+ */
+import Pages from 'vite-plugin-pages';
+export const ConfigPagesPlugin = () => {
+  return Pages({
+    pagesDir: [{ dir: 'src/pages', baseRoute: '' }],
+    extensions: ['vue', 'md'],
+    exclude: ['**/components/*.vue'],
+    nuxtStyle: true,
+  });
+};

config/vite/plugins/progress.ts

@@ -0,0 +1,9 @@
+/**
+ * @name ConfigProgressPlugin
+ * @description 构建显示进度条
+ */
+
+import progress from 'vite-plugin-progress';
+export const ConfigProgressPlugin = () => {
+  return progress();
+};

config/vite/plugins/restart.ts

@@ -0,0 +1,10 @@
+/**
+ * @name ConfigRestartPlugin
+ * @description 监听配置文件修改自动重启Vite
+ */
+import ViteRestart from 'vite-plugin-restart';
+export const ConfigRestartPlugin = () => {
+  return ViteRestart({
+    restart: ['*.config.[jt]s', '**/config/*.[jt]s'],
+  });
+};

config/vite/plugins/styleImport.ts

@@ -0,0 +1,7 @@
+import { createStyleImportPlugin, NutuiResolve, VantResolve } from 'vite-plugin-style-import';
+
+export const ConfigStyleImport = () => {
+  return createStyleImportPlugin({
+    resolves: [NutuiResolve(), VantResolve()],
+  });
+};

config/vite/plugins/svgIcons.ts

@@ -0,0 +1,16 @@
+/**
+ * @name SvgIconsPlugin
+ * @description 加载SVG文件，自动引入
+ */
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import path from 'path';
+
+export const ConfigSvgIconsPlugin = (isBuild: boolean) => {
+  return createSvgIconsPlugin({
+    // 指定需要缓存的图标文件夹
+    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+    // 指定symbolId格式
+    symbolId: 'icon-[dir]-[name]',
+    svgoOptions: isBuild,
+  });
+};

config/vite/proxy.ts

@@ -0,0 +1,20 @@
+import { API_BASE_URL, API_TARGET_URL, MOCK_API_BASE_URL, MOCK_API_TARGET_URL } from '../../config/constant';
+import { ProxyOptions } from 'vite';
+type ProxyTargetList = Record<string, ProxyOptions>;
+
+const init: ProxyTargetList = {
+  // test
+  [API_BASE_URL]: {
+    target: API_TARGET_URL,
+    changeOrigin: true,
+    rewrite: (path) => path.replace(new RegExp(`^${API_BASE_URL}`), ''),
+  },
+  // mock
+  [MOCK_API_BASE_URL]: {
+    target: MOCK_API_TARGET_URL,
+    changeOrigin: true,
+    rewrite: (path) => path.replace(new RegExp(`^${MOCK_API_BASE_URL}`), '/api'),
+  },
+};
+
+export default init;

package.json

@@ -27,9 +27,9 @@
     "vue-router": "^4.0.15"
   },
   "devDependencies": {
-    "@types/node": "^17.0.40",
+    "@types/node": "^17.0.41",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.1",
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
@@ -40,26 +40,34 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^9.1.0",
     "husky": "8.0.1",
-    "lint-staged": "12.4.1",
+    "lint-staged": "13.0.1",
     "mockjs": "^1.1.0",
     "postcss": "^8.4.14",
     "postcss-html": "1.4.1",
-    "postcss-px-to-viewport-8-plugin": "^1.1.3",
     "postcss-less": "^6.0.0",
+    "postcss-px-to-viewport-8-plugin": "^1.1.3",
     "prettier": "^2.6.2",
-    "stylelint": "^14.8.5",
+    "stylelint": "^14.9.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-recommended": "^7.0.0",
+    "stylelint-config-recommended": "^8.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^25.0.0",
+    "stylelint-config-standard": "^26.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "^4.6.3",
-    "vite": "^2.9.9",
+    "unplugin-auto-import": "^0.8.7",
+    "unplugin-vue-components": "^0.19.6",
+    "vite": "^2.9.10",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eruda": "^1.0.1",
     "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-pages": "^0.23.0",
+    "vite-plugin-progress": "^0.0.2",
+    "vite-plugin-restart": "^0.1.1",
     "vite-plugin-style-import": "^2.0.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-eslint-parser": "^9.0.2",
-    "vue-tsc": "^0.36.1"
+    "vue-tsc": "^0.37.3"
   },
   "husky": {
     "hooks": {

prettier.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  printWidth: 160,
+  printWidth: 140,
   semi: true,
   vueIndentScriptAndStyle: true,
   singleQuote: true,

src/i18n/index.ts

@@ -1,4 +1,4 @@
-import { AnyObject } from '#/global';
+import { AnyObject } from '/#/global';
 import { createI18n } from 'vue-i18n';
 
 export function loadLang() {

src/utils/index.ts

@@ -1,4 +1,4 @@
-import { AnyObject } from '#/global';
+import { AnyObject } from '/#/global';
 
 export function typeCheck(param: any) {
   return Object.prototype.toString.call(param);

src/utils/useAxiosApi.ts

@@ -1,6 +1,6 @@
 import { useAxios } from '@vueuse/integrations/useAxios';
 import axios, { AxiosRequestConfig } from 'axios';
-import { Toast } from 'vant';
+import Toast from 'vant/lib/toast';
 
 // create an axios instance
 const instance = axios.create({

types/auto-imports.d.ts

@@ -0,0 +1,69 @@
+// Generated by 'unplugin-auto-import'
+export {};
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope'];
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate'];
+  const computed: typeof import('vue')['computed'];
+  const createApp: typeof import('vue')['createApp'];
+  const createPinia: typeof import('pinia')['createPinia'];
+  const customRef: typeof import('vue')['customRef'];
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'];
+  const defineComponent: typeof import('vue')['defineComponent'];
+  const defineStore: typeof import('pinia')['defineStore'];
+  const effectScope: typeof import('vue')['effectScope'];
+  const getActivePinia: typeof import('pinia')['getActivePinia'];
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance'];
+  const getCurrentScope: typeof import('vue')['getCurrentScope'];
+  const h: typeof import('vue')['h'];
+  const inject: typeof import('vue')['inject'];
+  const isProxy: typeof import('vue')['isProxy'];
+  const isReactive: typeof import('vue')['isReactive'];
+  const isReadonly: typeof import('vue')['isReadonly'];
+  const isRef: typeof import('vue')['isRef'];
+  const mapActions: typeof import('pinia')['mapActions'];
+  const mapGetters: typeof import('pinia')['mapGetters'];
+  const mapState: typeof import('pinia')['mapState'];
+  const mapStores: typeof import('pinia')['mapStores'];
+  const mapWritableState: typeof import('pinia')['mapWritableState'];
+  const markRaw: typeof import('vue')['markRaw'];
+  const nextTick: typeof import('vue')['nextTick'];
+  const onActivated: typeof import('vue')['onActivated'];
+  const onBeforeMount: typeof import('vue')['onBeforeMount'];
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'];
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'];
+  const onDeactivated: typeof import('vue')['onDeactivated'];
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured'];
+  const onMounted: typeof import('vue')['onMounted'];
+  const onRenderTracked: typeof import('vue')['onRenderTracked'];
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered'];
+  const onScopeDispose: typeof import('vue')['onScopeDispose'];
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch'];
+  const onUnmounted: typeof import('vue')['onUnmounted'];
+  const onUpdated: typeof import('vue')['onUpdated'];
+  const provide: typeof import('vue')['provide'];
+  const reactive: typeof import('vue')['reactive'];
+  const readonly: typeof import('vue')['readonly'];
+  const ref: typeof import('vue')['ref'];
+  const resolveComponent: typeof import('vue')['resolveComponent'];
+  const setActivePinia: typeof import('pinia')['setActivePinia'];
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix'];
+  const shallowReactive: typeof import('vue')['shallowReactive'];
+  const shallowReadonly: typeof import('vue')['shallowReadonly'];
+  const shallowRef: typeof import('vue')['shallowRef'];
+  const storeToRefs: typeof import('pinia')['storeToRefs'];
+  const toRaw: typeof import('vue')['toRaw'];
+  const toRef: typeof import('vue')['toRef'];
+  const toRefs: typeof import('vue')['toRefs'];
+  const triggerRef: typeof import('vue')['triggerRef'];
+  const unref: typeof import('vue')['unref'];
+  const useAttrs: typeof import('vue')['useAttrs'];
+  const useCssModule: typeof import('vue')['useCssModule'];
+  const useCssVars: typeof import('vue')['useCssVars'];
+  const useRoute: typeof import('vue-router')['useRoute'];
+  const useRouter: typeof import('vue-router')['useRouter'];
+  const useSlots: typeof import('vue')['useSlots'];
+  const watch: typeof import('vue')['watch'];
+  const watchEffect: typeof import('vue')['watchEffect'];
+  const watchPostEffect: typeof import('vue')['watchPostEffect'];
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect'];
+}

types/components.d.ts

@@ -0,0 +1,14 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+import '@vue/runtime-core';
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink'];
+    RouterView: typeof import('vue-router')['RouterView'];
+    TitleBar: typeof import('./../src/components/TitleBar/index.vue')['default'];
+  }
+}
+
+export {};

vite.config.ts

@@ -1,10 +1,8 @@
-import vue from '@vitejs/plugin-vue';
+import { createVitePlugins } from './config/vite/plugins';
-import vueJsx from '@vitejs/plugin-vue-jsx';
 import { resolve } from 'path';
 import { ConfigEnv, UserConfigExport } from 'vite';
-import { createStyleImportPlugin, NutuiResolve } from 'vite-plugin-style-import';
+
-import { viteMockServe } from 'vite-plugin-mock';
+// import { viteMockServe } from 'vite-plugin-mock';
-import eruda from 'vite-plugin-eruda';
 
 const pathResolve = (dir: string) => {
   return resolve(process.cwd(), '.', dir);
@@ -14,7 +12,6 @@ const pathResolve = (dir: string) => {
 export default function ({ command }: ConfigEnv): UserConfigExport {
   const isProduction = command === 'build';
   const root = process.cwd();
-  console.log(isProduction);
   return {
     root,
     resolve: {
@@ -39,19 +36,7 @@ export default function ({ command }: ConfigEnv): UserConfigExport {
       host: '0.0.0.0',
       hmr: true,
     },
-    plugins: [
+    plugins: createVitePlugins(isProduction),
-      vue(),
-      vueJsx(),
-      createStyleImportPlugin({
-        resolves: [NutuiResolve()],
-      }),
-      eruda(),
-      viteMockServe({
-        mockPath: './src/mock',
-        localEnabled: command === 'serve',
-        logger: true,
-      }),
-    ],
     css: {
       preprocessorOptions: {
         scss: {