解决前端项目中,浏览器无法正常加载带.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
    }
相关推荐
宿6749 小时前
vue3-包管理器
前端·vue.js
@PHARAOH10 小时前
WHAT - Remix 入门和基本实践:理解两套产物
前端·remix
mayaairi10 小时前
Vue2 生命周期完全指南:从创建到销毁的8个钩子函数
前端·javascript·vue.js
xy345311 小时前
axure9.0 如何打造一个计时器(简单版)
前端·ui·html·axure·原型·产品设计
IMPYLH11 小时前
HTML 的 <pre> 元素
前端·javascript·html
tsumikistep12 小时前
【前端】Vue + Axios 跨域问题实战:7070 代理转发 8080 + 401 报错分析(黑马外卖)
前端·javascript·vue.js
lichenyang45312 小时前
鸿蒙首页从等高商品 Grid 到双列瀑布流:同一张图也能做出小红书式浏览节奏
前端
里欧跑得慢12 小时前
Flutter主题与样式详解
前端·css·flutter·web
计算机魔术师13 小时前
TPU推理性价比翻50%,NVIDIA的护城河要见底了?
前端
IT_陈寒13 小时前
Python的多线程就是个假把式,我算是体验到了
前端·人工智能·后端