vue3 vite sourcemap控制台报错位置错误问题, 完美解决

已于 2023-08-24 14:01:16 修改
阅读量8.5k 收藏 10
点赞数 17
分类专栏： 前端项目运行报错及解决方案 文章标签： 前端
于 2023-07-19 11:02:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guojun19900715/article/details/131803326
版权

在使用vue3 + vite 进行项目开发时, 控制台报错位置不准问题深受其烦, 在阅读大量文章后对此问题的理解反馈给大家,希望能帮助更多的人解决此问题

遇到的问题如下图:
报错位置
在这里插入图片描述
定位到的位置在这里插入图片描述

解决办法: 打开控制台点击设置
在这里插入图片描述
将 Enable JavaScript source maps 选中状态改变成非选中状态即可
在这里插入图片描述

关闭设置后刷新, 点击位置点击进入已经能够跳到对应的报错位置, 但在文件中查找位置依然可能不对, 原因是返回的位置是经过vite编译过的对应单独的map.js文件的位置,并不是开发.vue文件报错所在的行数, 解决该问题, 建议将
script标签包含部分提升到.vue文件的最前面即可, 这样无论是通过debugger跳转还是直接找该文件的报错位置都是准确的

最后希望能帮助大家解决该问题, 创作不易, 请留下您的点赞,万分感谢

guojun@07
关注
  • 17
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue3 - 报错 Error: Module “path“ has been externalized for browser compatibility. Cannot access “path.
王佳斌
05-21 4953
vue3，nuxt3，vue.js，vite，webpack，模块path无法引入，path，Uncaught (in promise) Error: Module "path" has been externalized for browser compatibility. Cannot access "path.resolve" in client code，path-browserify官方文档，vue3安装path-browserify插件后还是不行，无法使用path怎么办，import path报
vue项目黄色报错 提示DevTools failed to load SourceMap: Could not load content for https://static1.vvwx.net/p
肖肖肖丽珠的博客
08-20 2110
一直有黄色的提示百度翻译了一下，说.map的文件没办法加载 这是由于谷歌的一些扩展导致的 不勾选那两项，然后刷新一下页面 发现黄色的提示不见了
vue3 vite sourcemap控制台位置不准确问题
黄彪博客
09-27 320
文章目录参考解决办法 参考 vue3 vite sourcemap控制台报错位置错误问题, 完美解决 解决办法
解决vite+vue3+typescript中使用@路径映射src引入vue router和vuex报错问题
yunmengying的博客
07-01 5196
报错为 找不到模块@/store（@/router） 这个报错不影响使用，查明原因不是ts.config.json的路径映射配置问题，而是router和vuex的index文件是js文件，而main.ts是typescript文件，引入的router和store没有类型声明，统一修改为typescript文件后解决。 文件修改如下： main.ts //vue router import router from '@/router/index' //vuex import store from '@/s
Webpack开发环境调错 - source map
最新发布
听海边涛声
07-22 383
Webpack开发环境调错 - source map
vue3+vite 解决debugger断点调试定位不准确问题
m0_65745337的博客
04-11 1204
一、我们首先了解一下JavaScript SourceMap：JavaScript SourceMap（源映射）是一种文件格式，用于将编译后的JavaScript代码映射回原始代码。它提供了一种机制，使开发人员能够在调试和排查问题时追踪到源代码中的错误和异常。2、取消勾选“JavaScript source maps”
解决vite 断点调试定位不准确问题
CamilleZJ的博客
07-09 361
vite断点调试不准确问题的解决方案
vite build vue3项目如何配置开启sourcemap
徐同保的专栏
04-25 3606
如果使用0x对node项目进行性能分析
vue3 + vite自定义封装vue+audio ，并发布到npm
l976689的博客
03-29 1708
vue3编写的自定义audio小工具，发布npm使用全过程讲解和遇到的坑
关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type of “
m0_67392661的博客
03-06 8066
问题说明 最近刚开始用上vite开发项目，结果就遇到了很多坑。 其中一个是，vite 项目 执行 “vite build” 并部署上线后，在浏览器中访问就会有以下关于路由的奇怪问题： 我们用嵌套路由开发的页面生成的路径，个别菜单在初次加载、或者二次刷新加载时，都会报错如：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/htm
vite-sourcemap-repro
03-20
vite-sourcemap-repro
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（1）
TJ1532635942的博客
08-23 4470
本文编写的目的是为了基于vite、vue3、ts搭建开箱即用的前端应用框架模板，会实现axios、vue-router和pinia的封装和基本使用。
vue3+vite打包后项目刷新后报错
weixin_64386986的博客
03-15 741
具体来说，它期望获取一个 JavaScript 文件，但是服务器却返回了一个 HTML 格式的响应，并且 MIME 类型是 "text/html"。浏览器在加载模块脚本时会对 MIME 类型进行严格的检查，根据 HTML 规范，它只接受 JavaScript 模块应有的 MIME 类型，通常是 "application/javascript"。vue3+ts+vite搭建的项目，本地运行没有问题，打包发布后首页什么都没问题，就是刷新页面直接跳转到404页面了，查阅资料发现是路由配置有问题。
解决Vue 3项目中报错信息直接展示在页面上的问题
qq_38682174的博客
04-22 911
Vue 3 项目中在开发模式下会将错误信息直接展示在页面上，但这在生产环境中可能会带来一些问题。
vuecli3打包项目上线之后报错怎么使用本地的sourcemap文件定位调试？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
03-02 1326
我们先本地开启sourcemap的生成，生成之后找到对应的map文件，然后丢到包里，比如下面的我的就放到了nginx服务里面，在kaimo包下面。我们上线的时候一般都不会添加sourcemap文件，一方面为了加快构建速度，另一方面避免源码泄漏。所以有时出现报错的时候很难定位问题所在。点击就会报错，但是并没有指向什么组件报错，以及哪一行有问题。例子：比如我写了一个错误的代码，点击。点进去就是一整行看不懂的代码。然后我们将map文件的链接。那么要如何定位到问题所在？添加到里面去，步骤如下。
vite—打包常见问题
m0_37616866的博客
12-15 6374
问题：打包时使用ts校验报错，原因是代码不符合ts校验规范 解决方案： 1. 关闭ts打包校验, 关闭vue-tsc ，修改package.json 2. 修改不符合ts规范的代码, vsCode中划横线的代码 // 方案一 "scripts": { "dev": "vite", // "build": "vue-tsc --noEmit && vite build", "build": "vite build", "serve": "vite prev.
记录一下vue3+vite中遇到的问题
qq_35332639的博客
03-09 908
转自他人，文末有链接，仅此保存备忘 使用Vue3测试时有如下代码： 1 2 3 4 5 6 7 简单的代码附件了一些看着不爽的提示，虽然不影响正常运行： 具体的错误信息如下： import HelloWorld from ‘./components/HelloWorld.vue’ import HelloWorld import HelloWorld 'HelloWorld' is declared but its value is never read.Vetur(6133) Mod
hbuilderX运行Vue3/Vite版项目报错 error during build 解决方法
舜岳的博客
08-02 5862
m1pro编译vite/vue3cli项目时编译报错。
vue3 vite ts引入vue文件报错 ts
08-03
回答: 当在Vue3 Vite TypeScript项目中引入Vue文件时，可能会遇到TS(2307)的报错。这个报错只是TypeScript的报错，不会影响项目的运行。根据官方文档的说明[1]，可以解决这个问题。首先，在vite.config.ts文件中添加配置，引入vue插件和设置别名[2]。然后，在package.json文件中修改build参数和在tsconfig.json文件中添加paths配置[3]。这样就可以解决引入Vue文件报错的问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值