首页 > 其他分享 >Vue3+vite打包Failed to load module script

Vue3+vite打包Failed to load module script

时间:2024-04-03 17:34:52浏览次数:24  
标签:load 文件 script module js facadeModuleId 打包

完整報錯信息:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

目前vite.config.js打包寫法:

    // 拆分js到模块文件夹
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []
          const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'
          return `js/${fileName}/[name].[hash].js`
        },

部署後一直打開不了頁面,打開控制台一直提示找不到某文件。一搜那文件發現有名字一樣的文件,將文件名重命名後打包竟然沒問題了

原因分析:

從此代碼可看出來文件夾名是使用文件所在的路徑,不然就使用文件名,進人/js/可以看到其中一個文件夾竟然包含兩個文件?文件名為interviewsAndSalesRecords.svg。還有個文件名為InterviewsAndSalesRecords。打包後會在同一文件夾。

原來是windows文件夾名是不區分大小的,Linux是區分文件夾名大小寫的。windows下打包導致文件資源路徑錯誤,Linux下部署找不到對應的資源文件

解決:

管他三七二十一,反正客戶沒要求靜態資源放哪,將所有腳本都放到js/下

chunkFileNames: 'js/[name]-[hash].js',

 

标签:load,文件,script,module,js,facadeModuleId,打包
From: https://www.cnblogs.com/frenzy/p/18113187

相关文章

  • Vue3+TypeScript项目(SKU管理模块)
    一、SKU模块静态页面src\views\product\sku\index.vue<template><el-card><el-tableborderstyle="margin:10px0px"><el-table-columntype="index"label="序号"width="80px"></el-table......
  • JavaScript变量对象详解
    正文在JavaScript中,变量对象是执行上下文中的一个重要概念,它负责存储函数中的变量、函数声明和形参。了解变量对象对于理解JavaScript的作用域、作用域链以及变量的声明和提升至关重要。1.变量对象的定义变量对象是在执行上下文创建阶段被创建的,用于存储该上下文中的变......
  • C#-JavaScript-base64加密解码
    C#//base64加密//调用方式:Helper.EncodeToBase64(需要加密字符串)publicstaticstringEncodeToBase64(stringdata){byte[]byteData=Encoding.UTF8.GetBytes(data);returnConvert.ToBase64String(byteData);......
  • 用JavaScript实现响应式设计的魔法
    在数字世界的迷宫中,响应式设计就像是一把万能钥匙,能打开任何大小屏幕的大门。不论是巨大的桌面显示器,还是袖珍的手机屏幕,响应式设计确保你的网站或应用能在任何设备上都提供优质的用户体验。但如何用JavaScript施展这种魔法呢?让我们一探究竟。使用媒体查询监听器在CSS中,我......
  • 使用JavaScript提升Web应用的安全性
    在构建Web应用时,安全性是一个我们绝不能忽视的重要方面。随着网络攻击手段的日益狡猾和复杂,如何保护我们的应用和用户的数据安全成了每个开发者必须面对的问题。本文将介绍一些常见的Web安全威胁,比如跨站脚本攻击(XSS)、跨站请求伪造(CSRF),以及如何通过使用ContentSecurityPol......
  • 【华为OD】2024年华为OD机试C卷真题集:最新的真题集题库 C/C++/Java/python/JavaScript
    【华为OD】2024年C卷真题集:最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客 2024年华为OD机试C卷真题题集题库,有2种分数的题目列表分别是100分的列表、200分的列表需要订阅请看链接:C卷......
  • HOW - Typescript 常用特性介绍
    目录一、目标二、常用特性介绍anyvsunknowntypevsinterface泛型:Generics1.函数的泛型2.接口、类、类型别名的泛型3.泛型约束:限制类型变量的取值范围交叉类型1.用法一:一个对象拥有多个对象的所有属性2.用法二:Mixin条件类型1.用法一:Non......
  • ImportError: DLL load failed while importing _cext: 找不到指定的模块
    网上搜索说,这个错误表明Python在尝试导入名为_cext的扩展模块时失败了,这通常是因为它依赖的某些动态链接库(DLL)文件无法被正确加载。这可能是因为相应的DLL文件不存在于预期的位置,或者系统缺少运行该DLL所必需的其他依赖项。在一个帖子中看到通过pipinstallmsvc-runtime可以即......
  • 记录解决QT环境变量、qwt环境搭建、cannot load QT5core.dll错误、TreeWidget与TabWid
    一、配置QT环境变量:依次打开:设置->系统->关于->高级系统设置->环境变量->系统变量(s)->Path->编辑,将QT安装目录中以下文件路径复制粘贴至Path中:D:\BaiDuWangPan\SoftWare\QT_551\5.5\mingw492_32\binD:\BaiDuWangPan\SoftWare\QT_551\Tools\mingw492_32\bin相关解决方法可借鉴......
  • Javascript 变量类型 Object 和 Function 讲解
    在JavaScript中,Object 和 Function 是两种非常重要的类型,但它们之间也有一些关键的区别和联系。Object类型在JavaScript中,几乎所有的事物都是对象,包括原始值(如数字和字符串)的包装对象、数组、函数,以及使用字面量语法或构造函数创建的对象实例。对象是一个复合值,它可以包......