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

前提:服务器上.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
    }
相关推荐
葡萄城技术团队19 分钟前
在 SpreadJS 里新增右键菜单,把业务动作放到用户手边
前端
大明二代22 分钟前
从 RAG 到有记忆的 Agent:Mastra Memory 与 PostgreSQL 实战
前端·javascript·人工智能
deli00724 分钟前
代码截图一键出 PNG 实测:3 种窗口风格,长行超 95 字符会被裁
前端
大哥430926 分钟前
慢 ≠ 挂:AI 搜索降级判定的设计,与一次 reasoning 模型排查复盘
前端
UaoN34 分钟前
作为全栈开发者,为什么看到 Shopify 回归原生,我依然选择 React Native
前端·后端
PBitW1 小时前
行内编辑,前端如何兜底?😭😭😭
前端·面试
小羊没烦恼!1 小时前
C#综合揭秘——Entity Framework 并发处理详解
java·开发语言·前端·javascript·数据库·mysql·c#
wing981 小时前
人生第一个私活:不到 2 小时,到手 350 元
前端·后端·程序员
张张123y1 小时前
后端第十二课:Agent 开发(让大模型从“会答“升级到“会做“)
前端·大模型·llm·agent·rag
A小码哥2 小时前
大模型成本怎么降,5 个动作先做前两个
java·前端·spring