vite-vite2常用配置

整理了一些常用配置以备不时之需

一取别名

配置：

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

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

使用：

import HelloWorld from '@/components/HelloWorld.vue'

二 base路径

const isProduction = process.env.NODE_ENV === 'production'

export default defineConfig({
  base: isProduction ? './' : ''
})

三 CSS预处理

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/styles/variables.scss";' //全局引入文件
        javascriptEnabled: true // 使用 less 编写样式的 UI 库（如 antd）时建议加入这个设置
      }
    }
  }
})

按照官方介绍，vite已对.scss, .sass, .less, .styl 和 .stylus 文件的内置支持，故只要安装其对应插件即可；

四代理设置

点击获取更多服务器端配置，下面只列举常用配置

export default defineConfig({
  server: {
    host：0.0.0.0, //运行后就是你自己的本机ip/或true监听局域网地址
    port：5173, //v3版本默认是5173，v2默认是3000
    open: true, // 如果需要在服务启动后自动打开页面可以打开这个设置
    proxy: {
      '/api': {
        target: 'www.mockUrl.com',
        changeOrigin: true
      }
    }
  }
})

五打包设置

点击获取更多构建选项，下面只列举常用配置

export default defineConfig({
  build: {
        target: 'es2015', //最低相容性
      outDir: 'dist', //默认输出目录
      assetsDir: 'static', //静态资源存放路径
      assetsInlineLimit: 4096, //默认4096，小于此阈值的导入或引用资源将内联为 base64 编码
      cssCodeSplit: true,//默认启用css代码拆分
      // Terser 相对较慢，但大多数情况下构建后的文件体积更小。ESbuild 最小化混淆更快但构建后的文件相对更大。
      minify: !isEnvProduction ? 'esbuild' : 'terser', //混淆器，使用terser需要安装依赖
      terserOptions: { //传递给 Terser 的更多 minify 选项。
        compress: {
          drop_console: isEnvProduction, // 生产环境去除console
          drop_debugger: isEnvProduction, // 去掉debugger
        }
      },
      rollupOptions: { //传递给rollup的更多选项
        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();
                }
            }
        }
      }
  }
})

一键直达Terser混淆器，Terser能够为我们做什么？它是一个具有压缩，转换处理js代码的工具，比如可以去除console和debugger，删除未使用的函数，变量等等。

六优化插件

1 第三方包样式按需引入

插件地址：vite-plugin-style-import - npm (npmjs.com)

配置：

import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    styleImport({
      libs: [
        {
          // 这里使用的是 react 版的 antd，如果需要用到其他的库，可以看看文档
          libraryName: 'antd',
          esModule: true,
          resolveStyle: name => {
            return `antd/es/${name}/style/index`
          }
        }
      ]
    })
  ]
})

示例：


import { Button } from 'ant-design-vue';

        ↓ ↓ ↓ ↓ ↓ ↓

import { Button } from 'ant-design-vue';
import 'ant-design-vue/es/button/style/index.js';

作用就是不再需要全局引入完整的style样式

2 gzip压缩

插件地址：vite-plugin-compression - npm (npmjs.com)

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [viteCompression()]
})

3 打包压缩图片

插件地址：vite-plugin-imagemin - npm (npmjs.com)

import viteImagemin from 'vite-plugin-imagemin'
export default defineConfig({
    plugins: [viteImagemin()]
})

4 打包体积可视化面板

插件地址：rollup-plugin-visualizer - npm (npmjs.com)

import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
    plugins: [visualizer({ open: true })]
})

5 配置CDN

插件地址：vite-plugin-cdn-import - npm (npmjs.com)

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

import { visualizer } from 'rollup-plugin-visualizer';
import importToCDN from 'vite-plugin-cdn-import'

export default defineConfig({
    plugins: [
        vue(), 
        visualizer({ open: true }),
        importToCDN({
            modules: [
              {
                name:"vue",
                var:"Vue",
                path:"https://unpkg.com/vue@3.2.31"
              },
              {
                name:"element-plus",
                var:"ElementPlus",
                path:"https://unpkg.com/element-plus@2.1.9",
                css:"https://unpkg.com/element-plus/dist/index.css"
              }
            ]
        })]
})

使用：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

参考资料

vite2.0配置清单 - 彩铅 - 博客园 (cnblogs.com)

vite配置cdn优化打包体积_顽皮宝的博客-CSDN博客_vite配置cdn