解决前端项目中,浏览器无法正常加载带.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
    }
相关推荐
AlienZHOU5 小时前
DeepSeek Harness 插件:HTML 实时可视化编辑
前端·agent·deepseek
剪刀石头布啊8 小时前
javascript手动实现继承
前端
Elias不吃糖8 小时前
Langfuse 入门:Trace、Prompt、Dataset、Experiment、Evaluator
前端·python·prompt·langfuse
vipbic8 小时前
一个前端的 9 天重构:我是怎么用 Codex 重做航栈的
前端·javascript·后端
Eason_Lou10 小时前
【无标题】
前端·vue.js·html
_codemonster10 小时前
npm run dev 是在开发模式运行,怎么在生产环境运行
前端·npm·node.js
kyriewen11 小时前
我受够了复制报错去问 AI,花一下午给控制台做了个调试助手
前端·javascript·ai编程
IT_陈寒12 小时前
Redis的DEL命令竟然没删掉数据?我踩的这个坑你得知道
前端·人工智能·后端
anOnion12 小时前
构建无障碍组件之Menu and Menubar Pattern
前端·html·交互设计