十二、vite配置详解

前言

        我们之前写项目一直是使用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这块的一些简单的理解,希望对大家有所帮助。

你可能感兴趣的:(vue3.0的开发和学习,javascript,前端,开发语言)