十二、vite配置详解

发布时间：2023-11-10 09:00

前言

我们之前写项目一直是使用npm进行运行webpack的项目，而运行webpack的项目会造成一种问题，那么就是运行的时候很长,可能很多人在面对这种情况就会觉得很难受，随着vue3的使用越来越多和vue3一起使用的还有一个前端开发与构建工具，拿就是vite。

vite的使用使我们打包，运行项目的速度都有了进一步的提高，那么接下来我们来看看vite的一些配置，该配置主要包含项目的运行服务、打包、以及插件的使用。下面配置vite必须高于或者等于2.0以上的版本，node版本在14以上，我使用的是14.16.1版本。

base配置

base：公共路径配置，完整的url或者空字符串或者./或者绝对url路径

base: '' //  空串
base: './' //  ./路径
base: '/test/' //  绝对url路径
base: 'http://baidu.com/' //  绝对url路径

publicDir：静态资源服务的文件夹，打包上线后，所对应的文件夹名称

publicDir：'/' // 开发环境
publicDir：'test'  // 上线修改配置

resolve.alias: 配置别名，类型数组，里面是对象，find对应查找方式，replacement对应路径

resolve: {
    alias: [
        { find: "@", replacement: resolve(__dirname, "../src") },
    ],
},

满足以上配置基本上base就可以ok了。

server配置（服务）

host：ip，在vite脚手架初次下载下来是没有host，只有localhost,当我们需要使用ip时是没有办法的，这个时候我们可以设置host就行

host：0.0.0.0 //运行后就是你自己的本机ip

port：端口号

port：8081

strictPort：设置为true，若端口已被占用则会直接退出，反之为false，尝试下一个端口

strictPort：true

open：打开浏览器，直接设置为true，打开默认浏览器

open: true

build配置(打包)

outDir：输出路径,加/是为了访问资源文件。

outDir: '/test'

assetsDir：静态资源的存放路径，图片、js、css存放位置

assetsDir： 'static'

chunkSizeWarningLimit：chunk 大小警告的限制，单位kbs，超过这个范围会报警告

chunkSizeWarningLimit：100

terserOptions：传递给 Terser 的更多 minify 选项，其用法参数比较多，我这里主要用来去掉打印和断点

terserOptions: {
    compress: {
        drop_console: false, //去掉console
        drop_debugger: false, // 去掉debugger
    },
},

rollupOptions：自定义底层的 Rollup 打包配置，我这里添加配置，主要去做压缩文件。

rollupOptions: {
    output: {
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]",
        manualChunks: id => {
            // 使用函数形式时，每个解析的模块 id 都会传递给函数。
            // 如果返回字符串，则模块及其所有依赖项将添加到具有给定名称的手动块中。
            // 例如，这将创建一个vendor包含所有依赖项的块node_modules：
            if (id.includes("node_modules")) {
                return id.toString().split("node_modules/")[1].split("/")[0].toString();
            }
        },
    },
},

plugin配置(插件)

plugins：数组类型。其中存放插件,通过插件进行整合，开启gzip压缩、图片压缩、ui组件引入

import legacyPlugin from "@vitejs/plugin-legacy";
import vue from "@vitejs/plugin-vue";
// import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// import imageminPlugin from "vite-plugin-imagemin"
// import Components from "unplugin-vue-components/vite";
import compressionPlugin from "vite-plugin-compression";
plugins: [
    vue(),
    Components({
        resolvers: [
            ElementPlusResolver({
                importStyle: "sass",
            }),
        ],
    }),
    /**
     * 浏览器兼容
     */
    legacyPlugin({
        targets: ["chrome >= 40", "ie >= 11"],
        additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
    }),
    /**
     * 执行gzip压缩
     */
    compressionPlugin({
        ext: ".gz",
        algorithm: "gzip",
        deleteOriginFile: false, // 设置为true，删除打包好的
        threshold: 500,
    }),
]

proxy配置(代理)

"/api": {
    target: "http://jsonplaceholder.typicode.com",
    changeOrigin: true,
    rewrite: (path: string) => path.replace(/^\\/api/, ""),
},

以上就是本人对前端vite这块的一些简单的理解，希望对大家有所帮助。