一份關於vite.config.ts專案常用項配置

vite.config.ts

完整的配置我已上傳GitHub，點選檢視

這是通過這個配置打包好的專案地址 : 演示地址

開啟JSX

編寫高效能的元件,JSX列子元件

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
}

配置多頁面

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')
    },
}

壓縮最小輸出

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();
            }
        }
    },
},

移除console

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

配置別名

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

當配置了別名的時候，為了讓編輯器能更好的識別別名，需要配置jsconfig.json檔案，放在vite.config.ts同級別即可，編輯器會自動讀取

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

vxe-table表格，按需載入

一個基於 vue 的 PC 端表格元件，支援增刪改查、虛擬列表、虛擬樹、懶載入、快捷選單、資料校驗、列印匯出、表單渲染、資料分頁、彈窗、自定義模板、渲染器、賊靈活的配置項、擴充套件介面等.

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`
            }
        ]
    })
}

開啟壓縮

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', // 生成的壓縮包字尾
    })
}

開啟CDN

字只需要配置即可，自動生成模板所引用的cdn路徑

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',
            }
        ]
    })
}

注入變數到html模板中

import html from 'vite-plugin-html'

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

配置構建依賴包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,
    }
}

配置代理

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/, '')
            }
        }
    }
}

配置less

修改全域性less變數

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

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