A copy of common item configuration about vite.config.ts project

vite.config.ts

I have uploaded the complete configuration to GitHub, click to view

This is the project address packaged with this configuration: Demo address

Open JSX

Write high-performance components, JSX sub-components

new Vue({ 
    el: '#demo', 
    render: function (h) { 
        return ( 
            <AnchoredHeading level={1}> 
                <span>Hello</span> world! 
            </AnchoredHeading> 
        ) 
    } 
})

import vueJsx from '@vitejs/plugin-vue-jsx'

export {
    vueJsx
}

Configure multiple pages

rollupOptions: {
    input: {
        example: path.resolve(process.cwd(), 'index.html'), // 把页面放在外面，路径简短 防止src/packages/web/index.html ，建议vite把key(web、lib)可也阔以映射成页面路径，就避免这个问题
        lib: path.resolve(process.cwd(), 'lib.html')
    },
}

Compressed minimum output

rollupOptions: {
    // 两种方式 
    // 一，也可以指定包名打包
    // output: {
    //     manualChunks: {
    //         "vxe-table": ["vxe-table"],
    //         "echarts": ["echarts"],
    //         "xe-utils": ["xe-utils"],
    //         "lodash": ['lodash'],
    //         "ant-design-vue": ['ant-design-vue'],
    //         "@antv/g2plot": ['@antv/g2plot'],
    //         "@antv/g2": ['@antv/g2'],
    //     }
    // },
    // 二，自动分割包名输出 chunkSizeWarningLimit 配置大小
    output: {
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/static/[name]-[hash].[ext]',
        manualChunks(id: any) {
            if (id.includes('node_modules')) {
                return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
        }
    },
},

Remove console

terserOptions: {
    compress: {
        drop_console: true,
        drop_debugger: true,
    },
}

Configure alias

resolve: {
    alias: {
        // 如果报错__dirname找不到，需要安装node,执行yarn add @types/node --save-dev
        "@": path.resolve(__dirname, "src"),
        "__ROOT__": path.resolve(__dirname, ""),
        "comps": path.resolve(__dirname, "src/components"),
    }
},

When the alias is configured, in order for the editor to better recognize the alias, you need to configure the jsconfig.json file and place it at the same level as vite.config.ts, and the editor will automatically read it

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ],
            "__ROOT__/*": [
                "*"
            ]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

vxe-table table, loaded on demand

A PC-side table component based on vue , supports additions, deletions, changes, virtual lists, virtual trees, lazy loading, shortcut menus, data verification, print export, form rendering, data paging, pop-up windows, custom templates, and renderers , Thief's flexible configuration items, extended interfaces, etc.

import styleImport from 'vite-plugin-style-import' //按需加载模块

export function configStyleImport() {
    return styleImport({
        libs: [
            {
                libraryName: 'vxe-table',
                esModule: true,
                resolveComponent: (name) => `vxe-table/es/${name}`,
                resolveStyle: (name) => `vxe-table/es/${name}/style.css`
            }
        ]
    })
}

Turn on compression

import viteCompression from 'vite-plugin-compression' // 开启压缩

export function configViteCompression() {
    // 开启压缩 [文档](https://github.com/anncwb/vite-plugin-compression/blob/main/README.zh_CN.md)
    return  viteCompression({
        verbose: true,
        disable: false,
        // filter:()=>{}, // 那些资源不压缩
        threshold: 1024 * 50, // 体积大于 threshold 才会被压缩,单位 b
        deleteOriginFile: false,// 压缩后是否删除源文件
        algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
        ext: '.gz', // 生成的压缩包后缀
    })
}

Open CDN

The word only needs to be configured, and the cdn path referenced by the template is automatically generated

import importToCDN from 'vite-plugin-cdn-import'

export function configCDN() {
    return importToCDN({
        modules: [
            {
                name: 'element-plus',
                var: 'ElementPlus',
                path: 'https://unpkg.com/element-plus/lib/index.full.js',
                css: 'https://unpkg.com/element-plus/lib/theme-chalk/index.css',
            },
            {
                name: 'vant',
                var: 'vant',
                path: 'https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js',
                css: 'https://cdn.jsdelivr.net/npm/vant@next/lib/index.css',
            }
        ]
    })
}

Inject variables into the html template

import html from 'vite-plugin-html'

export function configHtml(opt: any) {
    return html({
        inject: {
            injectData: {...opt.variables}
        },
        minify: true
    })
}

Configure build dependency package lib

lib: {
    entry: path.resolve(process.cwd(), 'src/packages/install.ts'),
    name: 'vueViteAdminTs', // 构建依赖包的时候， 对外暴露的名称
    fileName: (format: string) => `index.${format}.js`,
    rollupOptions: {
        external: ['vue', 'vue-router'],
        output: {
            globals: {
                vue: 'Vue'
            }
        }
    }
},
rollupOptions: {
    output: {
        inlineDynamicImports: true,
    }
}

Configure proxy

export function configServer() {
    return {
        host: '0.0.0.0',
        port: 8290,
        https: false,
        proxy: {
            '^/api': {
                target: 'http://127.0.0.1:7001',
                changeOrigin: true,
                rewrite: (path: any) => path.replace(/^/api/, '')
            }
        }
    }
}

Configure less

Modify the global less variable

import theme from '../../src/packages/theme/ming'

export function configCss() {
    return {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    ...theme
                },
                javascriptEnabled: true,
            },
        }
    }
}

Recommended configuration

windicss

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

If you are worried about naming conflicts, create a new windi.config.ts in the root directory, and you can add a custom prefix to the attribute mode in the following ways:

export default {
  attributify: {
    prefix: 'w:',
  },
}

Use Liezi:

<button 
  w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  w:text="sm white"
  w:font="mono light"
  w:p="y-2 x-4"
  w:border="2 rounded blue-200"
>
  Button
</button>

vite-svg-loader

vite-svg-loader plugin allows you to reference the svg file like a component.

import svgLoader from 'vite-svg-loader' 
export default defineConfig({ plugins: [vue(), svgLoader()] })

use

<template>
  <MyIcon />
</template>

<script setup>
import MyIcon from './my-icon.svg'
</script>

vite-plugin-components

vite-plugin-components can realize the automatic on-demand introduction of component libraries or internal components without manual import, which can help us save a lot of code for import

import Vue from '@vitejs/plugin-vue'
import ViteComponents from 'vite-plugin-components'

export default {
  plugins: [
    Vue(),
    ViteComponents()
  ],
};

Okay, I will write about the configuration of Guan and Vite first. As for new configurations or new changes later, I will configure them in the warehouse , and verify the feasibility