vite vite.config.js中的配置

vite打包依赖于 rollup和esbuild

rollup中文文档

esbulid中文文档

基本配置

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

//告诉 Vite 打包后的产物哪些 dependencies 需要在页面入口 html 文件中随 public 目录（或 CDN）引入
import htmlConfig from "vite-plugin-html-config"; 

//告诉vite什么 dependencies 不参与打包
import { viteExternalsPlugin } from "vite-plugin-externals"; 
// https://vitejs.dev/config/
import { fileURLToPath } from "url";
const filename = fileURLToPath(
    import.meta.url);
// 跟目录
const _dirname = path.dirname(filename);

export default ({ mode }) => {
    // console.log(loadEnv(mode, process.cwd()).VITE_APP_BASE_API, "api");
    return defineConfig({
        define: {
            "process.env": process.env
        },

        // 插件配置
        plugins: [
            vue(),
          
            AutoImport({
                resolvers: [
                    ElementPlusResolver({
                        importStyle: true,
                    }),
                ],
            }),

            Components({
                resolvers: [
                    ElementPlusResolver({
                        importStyle: true,
                    }),
                ],
            }),

            // 这里表示 xxxx不参与打包
            viteExternalsPlugin({
                xxxx: "xxxx",
            }),

            // 引入本地库 xxxx一般放在 public下
            htmlConfig({
                headScripts: [{
                        src: "/xxxx/xxxx.js",
                    },
                    
                ],
                links: [{
                    rel: "stylesheet",
                    href: "/xxxx/xxxx.css",
                }, ],
            }),
        ],
        base: "./",
        publicDir: "public",
        productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
        //设置的别名
        resolve: {
            // 如果报错__dirname找不到，需要安装node,
            // 执行npm i @types/node --save-dev
            alias: {
                "@": path.resolve(_dirname, "./src"),
                "@assets": path.resolve(_dirname, "./src/assets"),
                "@utils": path.resolve(_dirname, "./src/utils"),
                "@components": path.resolve(_dirname, "./src/components"),
            },
        },
        // 服务配置
        server: {
            port: 3002, // 端口号
            open: true, // 自动在浏览器打开
            host: "0.0.0.0",
            https: false, // 是否开启 https,
            proxy: {
                "/api": {
                    target: loadEnv(mode, process.cwd()).VITE_APP_BASE_API,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, ""),
                },

            },
        },
        
        build: {
            minify: false,
            // 进行压缩计算
            brotliSize: false,
            //指定输出路径
            assetsDir: "./",
            // 指定输出文件路径
            outDir: "dist",
            // 代码压缩配置
            terserOptions: {
                // 生产环境移除console
                compress: {
                    drop_console: true,
                    drop_debugger: true,
                },
            },
            // chunkSizeWarningLimit: 1500,大文件报警阈值设置,不建议使用
            rollupOptions: {
                output: {
                    //静态资源分类打包
                    chunkFileNames: "static/js/[name]-[hash].js",
                    entryFileNames: "static/js/[name]-[hash].js",
                    // assetFileNames: "static/[ext]/[name]-[hash].[ext]",
                    assetFileNames(assetInfo) {

                        // 判断后缀分别放到不用的文件夹中
                        if (assetInfo.name.endsWith('.css')) {
                            return "static/css/[name]-[hash].[ext]"
                        }
                        if (["png", "jpg", "svg", "PNG"].some(ext => assetInfo.name.endsWith(ext))) {
                            return "static/img/[name]-[hash].[ext]"
                        }
                        if (["ttf", "woff", "woff2"].some(ext => assetInfo.name.endsWith(ext))) {
                            return "static/fonts/[name]-[hash].[ext]"
                        }
                        return "static/css/[name]-[hash].[ext]"
                    },
                    manualChunks(id) {
                        //静态资源分拆打包
                        if (id.includes("node_modules")) {
                            return id
                                .toString()
                                .split("node_modules/")[1]
                                .split("/")[0]
                                .toString();
                        }
                    },
                },
            },
        },
    });
};

 组件自动引入

import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
// 使用

plugins: [

AutoImport({
    resolvers: [
        ElementPlusResolver({
            importStyle: true,
        }),
    ],
}),
Components({
    resolvers: [
        ElementPlusResolver({
            importStyle: true,
        }),
    ],
})
]

固化版本，cdn引入和不进行打包的插件

这个插件是告诉 vite，在构建时，告诉 rollup 不要对 elementPlus这个包进行打包，而是在 index.html 中定义一个全局对象 elementPlus，定义到 window 上。

import { viteExternalsPlugin } from "vite-plugin-externals"; 

// 使用


plugins: [
    viteExternalsPlugin({
        elementPlus: "elementPlus",
    })
]

vite-plugin-html-config 这个插件可以在开发时（dev script）和构建时（build script）修改 index.html，注入一些 <link>、<script> 等 html 标签，支持加入 js 脚本

一般都是配个上一个 vite-plugin-externals 使用的 这样做的目的是为了 ，固化版本（我这里以elementplus为例）。

import htmlConfig from "vite-plugin-html-config";

//使用

 plugins: [
 htmlConfig({
    headScripts: [{
        src: "/element/elementPlus.js",
    }],
    links: [{
        rel: "stylesheet",
        href: "/element/elementPlus.css",
    }, ]
})]

设置别名

resolve: {
    // 如果报错__dirname找不到，需要安装node,
     // 执行npm i @types/node --save-dev
    alias: {
        "@": path.resolve(_dirname, "./src"),
        "@assets": path.resolve(_dirname, "./src/assets"),
        "@utils": path.resolve(_dirname, "./src/utils"),
        "@components": path.resolve(_dirname, "./src/components"),
    },
},

打包 分配包 rollupOptions.output

output.entryFileNames 该选项用于指定 chunks 的入口文件模式,也就是定义默认index.html引入如的index.js，是个字符串也可以是个函数（函数输出也是字符串）

output.chunkFileNames  分包时候会配合manualChunks 用到，是个字符串也可以是个函数（函数输出也是字符串）

output.assetFileNames 处理静态文件的打包后的位置，如css 和图片等其他文件可以通过这个属性进行分包

outpuy.manualChunks 分割打包，也就是将引入的几个js打包到一个js里，默认会打包到一个js里面，可能最终的代码非常大。从而影响加载时间，所以采取分包，会解决这个问题

build：{    
        rollupOptions: {
                output: {

                     entryFileNames: "static/js/[name]-[hash].js",
                    //静态资源分类打包
                    chunkFileNames: "static/js/[name]-[hash].js",
                   
                    // assetFileNames: "static/[ext]/[name]-[hash].[ext]",
                    assetFileNames(assetInfo) {

                        // 判断后缀分别放到不用的文件夹中
                        if (assetInfo.name.endsWith('.css')) {
                            return "static/css/[name]-[hash].[ext]"
                        }
                        if (["png", "jpg", "svg", "PNG"].some(ext => assetInfo.name.endsWith(ext))) {
                            return "static/img/[name]-[hash].[ext]"
                        }
                        if (["ttf", "woff", "woff2"].some(ext => assetInfo.name.endsWith(ext))) {
                            return "static/fonts/[name]-[hash].[ext]"
                        }
                        return "static/css/[name]-[hash].[ext]"
                    },
                    manualChunks(id) {
                        //静态资源分拆打包
                        if (id.includes("node_modules")) {
                            return id
                                .toString()
                                .split("node_modules/")[1]
                                .split("/")[0]
                                .toString();
                        }
                    },
                },
            }
    }