vite.config.js的配置项

前言

vite.config.js可以对项目的许多功能进行配置，例如：开发环境的跨域、UI框架的主色调、文件夹别名以及项目打包的基本配置。

基本配置项

• base - 当项目打包后需要部署在服务器的子目录时，可以对此配置访问路径。

// vite.config.js
import {defineConfig} from 'vite'

export default defineConfig({
    base: './',  // 默认值: ./
})

• plugins - 添加插件，添加前需导入插件。

// vite.config.js
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [Vue()],
})

• css - 配置 Antd Vue框架的主色调风格以及默认的圆角值。

// vite.config.js
import {defineConfig} from 'vite'

export default defineConfig({
    // ……
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    'primary-color': '#8400dc', //配置主色调颜色1
                    'link-color': '#8400dc', //配置主色调颜色2
                    'border-radius-base': '6px', //配置默认的圆角值
                },
                javascriptEnabled: true //开启less编译，注意：这个很重要
            }
        }
    },
    // ……
})

• build - 对项目打包相关的配置。

// vite.config.js
import {defineConfig} from 'vite'

export default defineConfig({
    // ……
    build: {
        outDir: 'dist', //指定打包输出路径
        assetsDir: 'assets', //指定静态资源存放路径
        cssCodeSplit: true, //css代码拆分,禁用则所有样式保存在一个css里面
        sourcemap: false, //是否构建source map 文件

        // 生产环境取消 console
        minify: 'terser',
        terserOptions: {
            compress: {
                drop_console: true,
                drop_debugger: true
            }
        },

        //会打包出 css js 等文件夹 目录显得清晰
        rollupOptions: {
            output: {
                chunkFileNames: 'js/[name]-[hash].js',
                entryFileNames: 'js/[name]-[hash].js',
                assetFileNames: '[ext]/[name]-[hash].[ext]'
            }
        }
    },
    // ……
})

• resolve - 文件夹别名配置。
  值得一提的是，虽然你在此配置了文件别名，但是在其他文件引用时依然可能出现 点击导入语句无法跳转 或 编译器里导入代码爆红 等问题。解决问题的方法是在与vite.config.js文件同目录下新建tsconfig.json文件，具体的实现方法请查看我上一篇文章。

// vite.config.js
import {defineConfig} from 'vite'
import path from 'path'

export default defineConfig({
    // ……
    resolve: {
        //配置别名
        alias: {
            // __dirname:获取当前文件的路径
            '@': path.resolve(__dirname, 'src'),
            '@assets': path.resolve(__dirname, 'src/assets'),
            '@views': path.resolve(__dirname, 'src/views'),
            '@comp': path.resolve(__dirname, 'src/components'),
            '@comm': path.resolve(__dirname, 'src/common'),
            '@router': path.resolve(__dirname, 'src/router'),
            '@axios': path.resolve(__dirname, 'src/axios'),
            '@apis': path.resolve(__dirname, 'src/apis'),
            '@stores': path.resolve(__dirname, 'src/stores'),
            '@utils': path.resolve(__dirname, 'src/utils'),
        }
    },
    // ……
})

• server - 对开发环境进行配置。

// vite.config.js
import {defineConfig} from 'vite'
import path from 'path'

export default defineConfig({
    // ……
    server: {
        host: "0.0.0.0", //配置后运行项目会生成一个局域网访问路径
        cors: true,
        open: false,//启动项目自动弹出浏览器
        port: 3001,//启动端口
        // 跨域的配置
        proxy: {
            '^/ls-boot': {
                target: `http://localhost:3002/ls-boot`, //实际请求地址
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/ls-boot/, '')
            },
        }
    },
    // ……
})

我常用的配置文件

// vite.config.js
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
    base: './',
    plugins: [vue()],
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    'primary-color': '#8400dc',
                    'link-color': '#8400dc',
                    'border-radius-base': '6px',
                },
                javascriptEnabled: true //开启less编译，注意：这个很重要
            }
        }
    },
    //  构建
    build: {
        outDir: 'dist', //指定打包输出路径
        assetsDir: 'assets', //指定静态资源存放路径
        cssCodeSplit: true, //css代码拆分,禁用则所有样式保存在一个css里面
        sourcemap: false, //是否构建source map 文件

        // 生产环境取消 console
        minify: 'terser',
        terserOptions: {
            compress: {
                drop_console: true,
                drop_debugger: true
            }
        },

        //会打包出 css js 等文件夹 目录显得清晰
        rollupOptions: {
            output: {
                chunkFileNames: 'js/[name]-[hash].js',
                entryFileNames: 'js/[name]-[hash].js',
                assetFileNames: '[ext]/[name]-[hash].[ext]'
            }
        }
    },
    resolve: {
        //配置别名
        alias: {
            // __dirname:获取当前文件的路径
            '@': path.resolve(__dirname, 'src'),
            '@assets': path.resolve(__dirname, 'src/assets'),
            '@views': path.resolve(__dirname, 'src/views'),
            '@comp': path.resolve(__dirname, 'src/components'),
            '@comm': path.resolve(__dirname, 'src/common'),
            '@router': path.resolve(__dirname, 'src/router'),
            '@axios': path.resolve(__dirname, 'src/axios'),
            '@apis': path.resolve(__dirname, 'src/apis'),
            '@stores': path.resolve(__dirname, 'src/stores'),
            '@utils': path.resolve(__dirname, 'src/utils'),
        }
    },
    server: {
        host: "0.0.0.0",
        cors: true,
        open: false,//启动项目自动弹出浏览器
        port: 3001,//启动端口
        // 跨域的配置
        proxy: {
            '^/ls-boot': {
                target: `http://localhost:3001/ls-boot`, //实际请求地址
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/ls-boot/, '')
            },
        }
    },
})