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,注入一些 

你可能感兴趣的:(javascript,开发语言,前端)