vite项目改变打包结果目录结构

前言

有些是工作总结，有些是技术文档搬运，有些是某视频刷到的，均会经过实践，留作总结，按需取舍。

场景

我们在部署项目或公司有特定化规定时，需要针对打包文件名称及打包路径做些更改，如我们初始化项目vite项目build的打包目录如下。默认打包文件目录是 入口文件index.html和资源文件assets，且assets中包含了全部的js css 以及 svg等文件

实现目标

我们将svg js svg等分类存放，不全部都集中在 assets中

实现流程

1：创建项目，依次安装依赖，启动项目

npm init vite@latest build-vite --template vue

2：将 assets中添加超过4kb的svg文件，并项目中使用（或者直接替换vue.svg）

vite打包中，小于4kb的svg等资源文件，会直接打包成base64格式，不会出现在打包资源文件中

3：执行npn run build查看默认打包路径文档结构，是否如上图所示

4：查找配置项

vite官方文档并没有找到配置打包路径修改选项，vite打包是继承了rollup打包，且vite中rollupOptions配置自定义底层的 Rollup 打包配置。这与从 Rollup 配置文件导出的选项相同rollupOptions文档

我们可借助 rollup来更改打包结构rollup文档

5：修改配置项

vite.config.ts中增加配置如下

build: {
    rollupOptions: {
      output: {
        entryFileNames: "js/[name]-[hash].js", // js入口文件配置，仅仅入口文件不包括分包及懒加载的js [name][hash]占位符 [ext]后缀
        chunkFileNames: "js/[name]-[hash].js", // 打包后每个chunk的文件名
        // assetFileNames: "assets/[name]-[hash].[ext]" // 打包后每个资源文件的文件名 可以传入字符串（静态资源均在assets中包括css svg等） 可传入函数
        assetFileNames(assetInfo) {
          // 自定义资源文件的命名
          if (assetInfo.name?.endsWith("css")) {
            return `css/[name]-[hash][extname]`;
          }
          // 定义图片后缀
          const imgExts = [".png", ".jpg", ".jpeg", ".gif", ".svg"];
          if (imgExts.some(imgExt => assetInfo.name?.endsWith(imgExt))) {
            return `images/[name]-[hash][extname]`;
          }
          return `assets/[name]-[hash][extname]`;
        }
      }
    }
  },

此时执行npm run build打包结果目录如下

再次提醒

有些是工作总结，有些是技术文档搬运，有些是某视频刷到的，均会经过实践，留作总结，按需取舍。