Vite基本配置

Vite是一个新型的前端构建工具，为我们在开发和构建做了很多工作，比如：生成一个开发服务器，提供热更新、直接通过包名引用模块、解决跨域等问题、打包时还会自动压缩文件体积。

Vite的内部帮我们集成了很多的插件如：Rollup、esbuild、uglifyjs、terser、postcss、less等等，降低了开发者的心智负担。

第三方插件的使用原理

在调用第三方插件，传入配置后，其实是在执行命令后添加参数,如：

...
esbuildOptions:{
    platform:"node"
}
就相当于
esbuild xxx --platform=node

搭建

npm create vite@latest

这条指令是 create-Vite 脚手架帮我们去创建模板, 并非是Vite, 由他创建的模板中集成了Vite;

vite.config.js

vite.config.js是默认的配置文件, 当然名字也可以更改但是没必要。

文件中需要向外暴露个配置对象

// 1. 一般
export default{
    xxxx
}

// 2. 函数式（提示效果更好）
import {defineConfig} from 'vite';
export default defineConfig({

})

同时可以传入一个函数
export default defineConfig((command,mode)=>{
    // command ->'build'|'serve'
    // mode -> 'development'|'production' 取决于运行 vite --mode xxx  xxx传入的是什么这里mode接受什么
})

esbuild

基本不用配置

网页去加载的资源在代码中写的都是相对路径，而在我们调试过程中会发现它的路径变成了http://localhost:5173/xxx这是Vite集成了esbuild去自动补全不规范的路径。

同时esbuild还可以解决多包问题，比如一个包引入了十几个包，这样浏览器就得一次性引入十几个包，而esbuild可以将十几个包写入一个包，提高引入效率。

optimizeDeps: { // esbuild，预加载
    exclude: [], // 默认node_modules
    esbuildOptions：{
        platform:"node" // 将平台改为node，默认为browser
    }
},

esbuild 官方配置API

别名alias

通过设置别名可以将文件中 "@" 转为绝对路径指向 "src" 文件

extensions

默认为 ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'] ,所以在vue3中导入组件需要精确到 "xxx.vue" 不然报错。同时官方不建议将 '.vue' 加入，因为会影响类型支持。

import {defineConfig} from 'vite'
import path from 'path';

export default defineConfig({
...
resolve:{
        alias:{ // 设置别名
            '@':path.resolve(__dirname,'./src')
        }
    },
})

css

import {defineConfig} from 'vite'
import {postcssPresetEnv} from 'postcss-preset-env'

export default defineConfig({
...
css: {
        modules: {
            // 转换类名（camelCase为驼峰、camelCaseOnly只为驼峰其他都被替换、
            // dashes为中划线、dashesOnly为只能是中划线）
            localsConvention: "dashes",

            // 设置样式是否是局部的 local(默认)生成hash，global全局样式
            scopeBehaviour: 'local',

            // 设置样式命名方式
            // generateScopedName:"[hash:5]_[name]_local"
            generateScopedName: (name, filename, css) => {
                return `${name}${filename}${css}`
            },

            // 默认类名+其他字符串（文件名、随机）加入到hash生成中
            hashPrefix: 'myPro', 

            // 不解析该文件样式名，一般用于引入第三方
            globalModulePaths: ['base.module.css']
        },

        // 预处理器（常用）
        preprocessorOptions: {
            // 整个配置会再less执行的时候当作参数提交执行lessc,所以怎么配置看less文档
            less: { 
                //可以使用 100/2px --math="always"
                math: "always",

                // 定义全局的样式变量
                globalVars: {},

                // 可以用来导入全局变量文件（常用）
                additionalData:`@import '@/styles/variables.less';`,

                //开启css映像索引，生产环境定位问题文件
                sourceMap:true 
            }
        },
        postcss:{ 
            // 设置css后处理，类似js中babel，兼容低版本页面。加载默认配置
            plugins:[postcssPresetEnv({ browsers: 'last 2 versions' })] 
        }
    },
})

css加载，vite匹配到相应内容，插入到style标签中。再进行解析，解析后是js形式，方便热更新等。

环境变量

一般环境有：开发、测试、预发布、灰度、生产。Vite会通过dotenv去解析相应env文件，然后loadEnv加载env进入import.env中提供使用。

默认的环境变量需要以VITE_开头，不然会被Vite自动过滤掉。

export default defineConfig({
    // 设置变量头部命名为ENV_
    envPrefix: 'ENV_' ,

    // 加载.env文件的目录默认为根目录
    envDir: '/',

})

TS

Vite 天生支持 ts 不用过多配置，可以导入一个开箱即用的ts语法检测，严格要求ts语法规范。

import checker from 'vite-plugin-checker'

export default defineConfig({
    // （常用）
   plugins: [checker({ typescript: true })]
})

构建(常用)

export default defineConfig({
    build:{ 
            // rollup打包配置，具体看rollupAPI
            rollupOptions:{
                output:{
                    assetFileNames:'[hash]-[name][extname]'
                }
            },

            // 4kb以下去打包成base64
            assetsInlineLimit:4096, 

            // 指定输出路径
            outDir:"dist", 

            //指定静态资源路径
            assetsDir:"static", 

            //打包前清空文件，默认true
            emptyOutDir:true,
        },
})

gzip压缩

插件 vite-plugin-compression

import compressPlugin from "vite-plugin-compression";

export default defineConfig({
    // （常用）
   plugins: [
    compressPlugin({
        filter:/xxx/g, // 不打包文件
        threshold:1025, // 超过 1025b打包 
        ext:'.gz' // 以gz的后缀
    })
   ]
})