橘子 | 橘子

vue.config.js 是vite的配置文件

工具插件

@vitejs/plugin-vue-jsx:支持jsx 地址
@vitejs/plugin-legacy:兼容低版本浏览器地址
vite-plugin-svg-icons:自动将所有svg图片加载到HTML中。并且每一个svg将会被过滤去无用的信息数据。让svg达到最小的值地址
vite-plugin-style-import:按需引入element-plus组件样式地址
vite-plugin-purge-icons:便高效的使用Iconify中所有的图标地址
rollup-plugin-visualizer:可视化分析打包文件大小地址
vite-plugin-theme:主题色替换地址
vite-plugin-pages:自动化路由地址
vite-plugin-components:自动化导入组件地址
unplugin-auto-import/vite:自动导入依赖地址
unplugin-vue-components/vite:自动导入组件地址
vite-plugin-vue-devtools:vue-devtools插件地址
vite-plugin-progress:打包进度条地址
unocss/vite:css框架地址

压缩插件

vite-plugin-html:提供minify和基于EJS模板功能的Vite插件地址
vite-plugin-compression:压缩文件生成gzip 地址
vite-plugin-imagemin:图片压缩地址

基础配置

import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import path from 'path'
    export default defineConfig({
        base: './', //打包路径
        publicDir: 'public', //静态资源服务的文件夹, 默认"public"
        root: process.cwd(), //项目根目录
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src'), //配置别名
            },
            extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], //配置扩展名 import时可以省略扩展名
        },
        plugins: [vue()], //插件配置
        
        css: { //css预处理器配置
            preprocessorOptions: { //css预处理器配置
                scss: { //scss配置
                    charset: false, // 关闭编译时 字符编码 报错问题
                    javascriptEnabled: true, //启用javascript
                    additionalData: `@import "${path.resolve(__dirname, 'src/assets/css/var.scss')}";`,
                },
            }
        },
        json: {
            //是否支持从 .json 文件中进行按名导入 
            namedExports: true,
            //若设置为 true 导入的json会被转为 export default JSON.parse("..") 会比转译成对象字面量性能更好 
            stringify:false,
        },
        esbuild: {
            //是否启用esbuild
            enable: true,
            //是否启用jsx
            jsxFactory: 'h', 
            jsxFragment: 'Fragment',
            //是否启用jsx
            jsxInject: `import { h } from 'vue'`,
        },
    })

服务配置

import { defineConfig } from 'vite'
    import path from 'path'
    export default defineConfig({
      server: {
          host: 'localhost', // 指定服务器主机名
          port: 3000, // 指定服务器端口
          open: true, // 在服务器启动时自动在浏览器中打开应用程序
          strictPort: false, // 设为 false 时，若端口已被占用则会尝试下一个可用端口,而不是直接退出
          https: false, // 是否开启 https
          cors: true, // 为开发服务器配置 CORS。默认启用并允许任何源
        proxy: {
          // 选项写法
          '/api': {
            target: 'http://jsonplaceholder.typicode.com',
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, '')
          },
        },
      },
    })

打包配置

打包是基于rollup的

import { defineConfig } from 'vite'
    import path from 'path'
    export default defineConfig({
        // 打包配置
        build: {
            target: 'modules', // 设置最终构建的浏览器兼容目标。modules:支持原生 ES 模块的浏览器
            outDir: 'dist', // 指定输出路径
            assetsDir: 'assets', // 指定生成静态资源的存放路径
            assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为base64编码，设置为0可禁用此项。默认4096（4kb）
            cssCodeSplit: true, // 启用/禁用CSS代码拆分，如果禁用，整个项目的所有CSS将被提取到一个CSS文件中,默认true
            sourcemap: false, // 构建后是否生成 source map 文件
            minify: 'terser', // 混淆器，terser构建后文件体积更小
            write: true,   //设置为 false 来禁用将构建后的文件写入磁盘  
            emptyOutDir: true,  //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。  
            brotliSize: true,  //启用/禁用 brotli 压缩大小报告 
            chunkSizeWarningLimit: 500,  //chunk 大小警告的限制 
            terserOptions: { //terser配置
                compress: {  //压缩配置
                    drop_console: true, //是否删除console
                    drop_debugger: true, //是否删除debugger
                },
            },
            rollupOptions: {   //配置rollup打包
                output: { //配置输出选项
                    manualChunks: {
                        vue: ['vue', 'vue-router'], //将vue和vue-router打包到一个文件中
                        // naiveUi: ['naive-ui'], //将naive-ui打包到一个文件中
                        // loadsh: ['loadsh'], //将loadsh打包到一个文件中
                        // lib: ['axios', 'dayjs'], //将axios和dayjs打包到一个文件中
                    },
                }
            }
        },
    })

工具插件 ​

压缩插件 ​

基础配置 ​

服务配置 ​

打包配置 ​

工具插件

压缩插件

基础配置

服务配置

打包配置