解决前端项目中，浏览器无法正常加载带.gz名称的文件

Eshine、2025-11-26 22:48

前提：服务器上.gz文件，在浏览器中无法直接获取，是因为问了安全考虑，带.gz的文件名称，会直接被拦截，浏览器访问时，控制台会直接报错，错误信息如下：

@TypeError: Failed to fetch index.c90e0kIi.js
dynamically imported module
https://xxx.com/js/login/Login.Gz_riRch.js

解决思路：编译打包后，js文件的名字中不要含有gz【不生成带"."的文件】，按照这个思路，只需要将vite.config.ts配置文件中的打包配置需改即可，具体修改如下：

javascript 复制代码

build: {
      chunkSizeWarningLimit: 1500,
      reportCompressedSize: false,
      rollupOptions: {
        output: {
          // 最小化拆分包
          // manualChunks(id) {
          //   if (id.includes("node_modules")) {
          //     return id.toString().split("node_modules/")[1].split("/")[0].toString()
          //   }
          // },
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: 'js/[name]_[hash].js',
          // 用于命名代码拆分时创建的共享块的输出命名
          // chunkFileNames: 'js/[name].[hash].js',
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: '[ext]/[name]_[hash].[ext]',
          // 拆分js到模块文件夹
          chunkFileNames: (chunkInfo) => {
            const facadeModuleId = chunkInfo.facadeModuleId
              ? chunkInfo.facadeModuleId.split('/')
              : []
            const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'
            // 将连接名称直接的"."换成"-"即可
            return `js/${fileName}/[name]_[hash].js`
          }
        }
      },
      terserOptions: {
        maxWorkers: 4
      },
      sourcemap: false
    }