乐趣区

关于vite:一份关于viteconfigts项目常用项配置

jiezi

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

举荐配置

windicss

import WindiCSS from 'vite-plugin-windicss'

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

如果放心命名抵触，在根目录新建windi.config.ts，能够通过以下形式给属性模式增加自定义前缀：

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

应用列子：

<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插件能够让你像援用组件一样援用 svg 文件.

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

应用

<template>
  <MyIcon />
</template>

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

vite-plugin-components

vite-plugin-components能够实现组件库或外部组件的主动按需引入组件, 而不须要手动的进行 import, 能够帮咱们省去不少 import 的代码

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

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

好了，关与 vite 的配置，我就先写到这了，至于前面有新的配置，或者有新的变动，我会在这个仓库外面进行配置，以及验证可行性

退出移动版