vite 开发中常用的插件 ​

// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
    plugins: [
        vueJsx({
            // options are passed on to @vue/babel-plugin-jsx
        })
    ]
}

pnpm add unplugin-vue-components -D

// 以ant-design-vue 组件为例
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'

Components({
    dts: true,
    dirs: [],
    resolvers: [
        AntDesignVueResolver({
            importStyle: 'less',
            importLess: true,
            resolveIcons: false
        }),

        (name) => {
            const components = [
                {
                    name: 'DtTheme',
                    styleDir: 'theme'
                }
            ]

            const comp = components.filter( it => it.name === name )
            if(comp.length > 0) {
                return {
                    // 组件名称
                    name,
                    // 组件来源
                    from: '@dt-frames/ui',
                    // 自动引入的css路径
                    sideEffects: `/node_modules/@dt-frames/ui/es/${ comp[0].styleDir }/index.less`
                }
            }
        }
    ]
}),

{
    include: [
		xxx
		"./components.d.ts"
        xxx
    ]
}

// 下载依赖包
pnpm add vite-aliases -D


// vite.config.js
import { ViteAliases } from 'vite-aliases'

export default {
	plugins: [
		ViteAliases()
	]
};

pnpm add vite-plugin-pages -D

// vite.config.js
import Pages from "vite-plugin-pages"

export default {
    plugins: [
        Pages({
            // 需要生成路由的文件目录，默认就是识别src下面的views文件
            dirs: "src/views",
            // 后缀名为'vue' | 'tsx'的文件自动生成路由
            extensions: ['vue', 'tsx'],
            // 排除在外的目录，即不将所有 components 目录下的 .vue 文件生成路由
            exclude: ["**/components/*", '**/shared/*', '**/*.component.*', "src/**/src/**"], 
            // 路由重构
            onRoutesGenerated: (routes) => {
                routes.forEach((route) => {
                    if (route.path.startsWith('/')) {
                        route.path = route.path.slice(1)
                    }
                })
            }
        }),
    ],
}

import { createApp } from 'vue'
import { createRouter, createWebHistory } from "vue-router"
import routes from "~pages"
import App from './App.vue'

const router = createRouter({
    history: createWebHistory(),
    routes,
})

createApp(App).use(router).mount('#app')

// 安装
pnpm add vite-plugin-compression -D


// vite.config.ts
import compressPlugin from 'vite-plugin-compression'

export default {
    plugins: [
        compressPlugin({
            ext: '.gz',
            algorithm: 'gzip',
            deleteOriginFile:true
        })
    ]
}

// 安装
pnpm add unplugin-auto-import -D

// plugin use
AutoImport({
    // targets to transform
    include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/, /\.vue\?vue/, // .vue
        /\.md$/, // .md
    ],

    // global imports to register
    imports: [
        // presets
        'vue',
        'vue-router',
        // custom
        {
        '@vueuse/core': [
            // named imports
            'useMouse', // import { useMouse } from '@vueuse/core',
            // alias
            ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
        ],
        'axios': [
            // default imports
            ['default', 'axios'], // import { default as axios } from 'axios',
        ],
        '[package-name]': [
            '[import-names]',
            // alias
            ['[from]', '[alias]'],
        ],
        },
    ],

    // Auto import for module exports under directories
    // by default it only scan one level of modules under the directory
    dirs: [
        // './hooks',
        // './composables' // only root modules
        // './composables/**', // all nested modules
        // ...
    ],

    // Filepath to generate corresponding .d.ts file.
    // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
    // Set `false` to disable.
    dts: './auto-imports.d.ts',

    // Auto import inside Vue template
    // see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72
    vueTemplate: false,

    // Custom resolvers, compatible with `unplugin-vue-components`
    // see https://github.com/antfu/unplugin-auto-import/pull/23/
    resolvers: [
        /* ... */
    ],

    // Generate corresponding .eslintrc-auto-import.json file.
    // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
    eslintrc: {
        enabled: false, // Default `false`
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
    },
})

// 安装
pnpm add @vitejs/plugin-legacy terser -D

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
    plugins: [
        legacy({
            targets: ['ie >= 11'],
            additionalLegacyPolyfills: ['regenerator-runtime/runtime']
        })
    ]
}