vue2在window环境下源代码调试报错

最新推荐文章于 2022-12-18 01:04:10 发布
最新推荐文章于 2022-12-18 01:04:10 发布
阅读量752 收藏 1
点赞数 1
分类专栏： javascript 文章标签： vue rollup-plugin-alias js vue源码 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/itSeven7/article/details/85273570
版权
本文解决了一个特定于Windows 7系统的Vue2源代码调试问题，该问题源于rollup-plugin-alias.js在Win7下无法正确解析路径。通过修改rollup-plugin-alias.js的源码，解决了配置文件夹路径前的反斜杠问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue2在window环境下源代码调试报错

  • 报错信息
我个人的电脑是win10系统没有出现该问题，在公司win7系统下，执行npm run dev 出现了下面的报错

Error: Could not load d:\个人\vue\src\core/config
  • 错误原因
    • 由于vue使用的是rollup进行打包，rollup-plugin-alias.js在win7下路径无法正确解析，出现上面config文件夹之前的反斜杠
  • 解决方法
// 修改node_module -> rollup-plugin-alias -> dist -> rollup-plugin-alias.js的源码
// 搜索对应变量声明将其替换为以下代码

const isFilePath = id => /(^\.?\/)|(^[a-zA-Z]\:(\\|\/))/.test(id);
const directory = path.dirname(importerId);
const filePath = path.resolve(directory, updatedId);
Vue2 - 详解实现网站接入微信扫码登录功能，微信授权生成登录二维码用户用手机扫描二维码登陆，微信扫描二维码登录详细流程及示例代码，支持弹框式、浏览器单独新开页显示，最新vue集成微信扫码授权登录！
王二红
06-25 3811
vue2，nuxt2，PC网站，网页，微信扫码登录，微信登陆，vue2微信扫码登录，获取个人信息，扫码登录后如何获取用户手机号，微信扫码授权登录，vue2详细实现微信扫一扫登陆，pc网页微信登录，vue集成微信扫码登录，详细流程和示例源码，第三方扫码登录，vue微信扫码登录怎么新开一页，跳页显示二维码，内嵌登录二维码，iframe，iframe新页面弹出，弹出一个小窗口显示登录二维码，登录报错，微信扫码没反应，解决手机点登录报错没反应，官方文档，手机扫描微信二维码登录网站，最好用的插件，vue-wxlogi
vue项目搭建2.x&3.x+基础搭建使用vant和一些配置
weixin_45758420的博客
11-30 830
vue项目搭建2.x&3.x+ 基础搭建使用vant和一些配置
vue源码运行错误
weixin_41835485的博客
11-02 201
在node_moudle中找到这个文件： 添加以下语句： if(!/js$/.test(updatedId)) { console.log(updatedId + '---->' + updatedId + '.js'); updatedId += '.js' }
解决Vue源码运行错误
weixin_43405946的博客
12-03 496
在node_modules>rollup-plugin-alias>dist>rollup-plugin-alias.js加上下面的代码就好了
vue 使用window的对象_nuxtjs在vue组件中使用window对象编译报错的解决方法
weixin_39867893的博客
12-19 1074
我们知道nuxtjs是做服务端渲染的，他有很多声明周期是运行在服务端的，以及正常的vue声明周期mounted之前均是在服务端运行的，那么服务端是没有比如window对象的location、navagitor等，以及H5的FormData()方法，所以当你在created之前使用这些时，会报错，那么如何处理呢？1、自己的写的函数里包含window等因为nuxt为SSR框架，所以其编译打包时会区分服...
vue中使用window对象_nuxt.js在vue组件中使用window对象编译报错的解决方法
weixin_39980082的博客
12-21 1246
NUXT官方常见问题：Window 或 Document 对象未定义？https://zh.nuxtjs.org/faq/window-document-undefined/#window-或-document-对象未定义-???????这是因为一些只兼容客户端的脚本被打包进了服务端的执行脚本中去。 对于只适合在客户端运行的脚本，需要通过使用process.client变量来判断导入。举个例子...
Windows下使用Rollup打包Vue源码问题
magic_engineer的博客
10-26 652
Rollup（rollup-plugin-alias）在Windows中解析路径错误导致 修改node_module -> rollup-plugin-alias -> dist -> rollup-plugin-alias.js的源码 搜索对应变量声明将其替换为以下代码 const isFilePath = id => /(^\.?\/)|(^[a-zA-Z]\:(\\|\/))/.test(id); const directory = path.dirname(i.
如何调试VUE代码（VUE调试利器 vue devtools）
daimeijin的博客
08-01 2178
前言 最新想开发一个前后端分离的项目，一直想开始的，拖延了好久终于决定要对它下手了。最早的时候开发的时候使用的还是JSP，那个时候使用的还是EL表达式，后来切换到Spring和SpringMVC之后采用的是HTML+JS的all in one的模式，虽然也可以称为前后端分离，但是还是耦合在一个大工程里面。到最近的项目拆分为前后端完全分离的模式。由于公司组织结构调整，前后台完全分离，所以对前端技术有点生疏了。需要及时补救一下。虽然VUE已经是一个很流行的框架了，但是三天不练手生，所以还是决定自己搞一个项目练练
Vue.js 笔记
Mr__Zhang___的博客
11-03 455
1 就是四个现代化： ① 模块化（JS 的模块化、CSS 的模块化、资源的模块化） ② 组件化（复用现有的 UI 结构、样式、行为) ③ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理) ④ 自动化（自动化构建、自动部署、自动化测试) 2 目前主流的前端工程化解决方法： ① webpack
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 2140
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
rollup 压缩插件 rollup-plugin-terser 在 rollup 3.x 不能使用了吗? 跳坑记
Zn 的个人技术分享
10-29 6060
今天使用 rollup 3 配置项目的时候, 发现安装常用的 terser 压缩插件 rollup-plugin-terser 出了问题，上 github 浏览了一圈，发现包名不能用在 3.x 版本了, 有第三方库 rollup-plugin-minification 可以替代。2022.10.28 更新 作者废弃了旧库,并通知大家转移到官方插件库(使用了 @rollup/ 打头)主要的报错信息如下这个意思就是说原 terser 插件最多只能支持到 2.x。那怎么办呢，总不能不压缩打码对吧。
整理 Vue2 项目中各种报错&警告-信息
Mr.小灰狼_随笔
09-06 1万+
Vue 报错&警告-信息 _ 整理版 自己平常 Vue 项目 中出现的一些Bug 和 警告⚠️ , 日常记录一下 : 目录 ( 1 )[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404" ( 2 )[Vue warn]: Error in v-on handler: "TypeError: this.todos.push is not a function
vue源码运行报错[!] (plugin Rollup Core) Error: Could not load 解决办法
会飞的咕咕鱼的博客
12-31 4319
[!] (plugin Rollup Core) Error: Could not load C:\web\vue-2.6.10\vue\src\core\config (imported by C:\web\vue-2.6.10\vue\src\platforms\web\entry-runtime-with-compiler.js): ENOENT: no such file or directory, open 'C:\web\vue-2.6.10\vue\src\core\config'Error:
pageoffice报错: 当前浏览器是42版本以上的谷歌浏览器，建议采用POBrowser技术打开PageOffice即可。
热门推荐
enthan809882的博客
11-09 3万+
是输入网址的问题， 如果是index的话，会出现提示打开 pageofficeprotocol的界面 输入　http://localhost:8080/maven-springmvc/demo/index　，效果如图： 输入http://localhost:8080/maven-springmvc/demo/word　，效果如图： ...
换个电脑运行项目失败原因、解决方法
weixin_44708899的博客
12-18 3538
换个电脑运行项目失败原因、解决方法 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 下载node-module失败 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree --legacy-peer-deps Error: The project seems to require yarn but it's not installed.
Windows7 安装vue3+ 血泪史~
weixin_42486438的博客
03-24 5465
问了N遍度娘之后终于让我安装成功了，Windows7系统，vue版本@vue/cli 5.0.4，node版本v12.20.0，npm版本6.14.8
Win7 搭建NodeJs、Vue2、Vue3，基于 vue-cli 创建建vue工程及相关问题解决思路
zx711166的博客
08-23 2801
由于开头选择的是 Win7 系统下最高版本 13.14.0 的 NodeJs，出现上述 NodeJs 版本与 Vue3 不匹配导致的情况，提示信息里描述将 NodeJs 降到 12.0.0 或者 提升到 14.0.0 及以上版本即可。查看 cnpm 的版本是否 >=8.2.0，高版本的cnpm无法在 13.14.0 的node 版本下使用，使用命令将 cnpm 降低版本即可。Win7 支持的 NodeJs 最高版本为 13.14.0，下载是去历史版本中寻找。配置 nodejs 环境变量。
vue的调试工具
qq_21729177的博客
03-01 1747
原网站链接：http://www.orzzone.com/vuejs-project-debug.html上图蛮有意思。VueJS用了很久了，大部分时候看下报错信息，结合Vue.js devtools查看下各个组件的数据其实就可以了，但是有时候还是有必要使用debugger的。话分两头，本文主要讲两个东西：Vue.js devtools开发工具的使用；使用debugger和sourcemap调试V...
使用micro-app 遇到的报错
最新发布
04-03
<think>好的，我现在需要帮助用户解决在使用micro-app过程中遇到的报错问题。首先，我需要仔细阅读用户提供的引用内容，看看是否有相关的解决方案。用户提到了四个引用，其中引用[2]直接提到了安装特定版本时的报错问题，而引用[3]和[4]可能涉及配置和路由的问题。 首先，用户的问题是关于报错解决方案的，我需要从这些引用中提取有用的信息。引用[2]指出安装npm包时的报错，可能跟版本号有关，所以可能需要检查版本是否正确，或者是否有网络问题。引用[3]提到在main.ts中引入micro-app并配置了禁用样式隔离，这可能涉及到配置错误导致的报错。引用[4]讨论了路由权限的配置，子应用路由的路径标记问题，如果路径配置错误，可能导致子应用加载失败，从而报错。 接下来，我应该按照常见的报错类型来组织解决方案。首先检查安装步骤是否正确，比如版本号是否正确，是否有拼写错误。然后检查基础配置，例如是否在main.ts中正确引入了micro-app并调用了start方法，是否有必要的配置项。接着是资源加载错误，比如子应用的地址是否正确，跨域问题如何处理。然后是路由配置问题，基座和子应用的路由是否冲突，路径是否匹配。此外，样式隔离的问题，虽然禁用可以提升性能，但如果子应用之间有样式冲突，可能需要调整配置。最后是版本兼容性，确保基座和子应用的框架版本兼容。 还需要考虑用户可能遇到的其他常见问题，比如控制台报错信息的具体内容，如何根据错误信息定位问题。例如，如果报错关于无法加载子应用，可能是资源地址错误或跨域限制。如果是路由问题，可能需要检查基座应用的路由配置是否符合引用[4]中的路径规则，即以‘/micro-’开头。 另外，用户提供的示例中引用了代码片段，比如在main.ts中的配置，需要确认用户是否正确复制了这些配置，是否有拼写错误或遗漏配置项。例如，是否设置了disableScopecss为true，或者是否有其他必要的配置参数。 最后，应该建议用户提供具体的报错信息，以便更精准地解决问题，因为不同的错误可能有不同的解决方法。同时，提醒用户查阅官方文档和社区资源，比如项目地址和案例，以获取最新的解决方案和最佳实践。</think>### Micro-app 报错解决方案 #### 一、安装阶段报错 **典型问题**：执行 `npm i @micro-zoe/micro-app@1.0.0-rc.2 --save` 时报错 **解决方案**： 1. 检查网络是否正常，尝试切换npm镜像源（如 `npm config set registry https://registry.npmmirror.com`） 2. 确认Node.js版本符合要求（建议v14+），可通过 `node -v` 验证 3. 清理缓存后重试： ```bash npm cache clean --force rm -rf node_modules package-lock.json npm install ``` [^2] #### 二、基础配置问题 **典型报错**：未初始化实例或配置错误 **解决方案**： 1. 确保在入口文件（如 `main.ts`）正确初始化： ```typescript import microApp from '@micro-zoe/micro-app' microApp.start({ disableScopecss: true, // 根据实际需求配置 plugins: { modules: { // 解决子应用沙箱逃逸问题 'app-name': [{ loader(code) { return code.replace(/window/g, 'window.__MICRO_APP_PROXY_WINDOW__') } }] } } }) ``` [^3] #### 三、资源加载错误 **典型现象**：控制台出现 `Failed to fetch` 或 `404` 错误 **解决方案**： 1. 检查子应用地址是否正确，确保基座应用能访问子应用资源 2. 处理跨域问题： - 开发环境配置CORS头： ```nginx add_header Access-Control-Allow-Origin "*"; add_header Access-Control-Allow-Methods "*"; add_header Access-Control-Allow-Headers "*"; ``` - 生产环境推荐使用同域部署 #### 四、路由配置问题 **典型问题**：子应用路由不生效或页面空白 **解决方案**： 1. 基座应用路由配置需包含子应用标识（如 `/micro-*`）： ```javascript // 基座路由配置示例 { path: '/micro-app/*', name: 'micro-app', component: () => import('基座容器组件路径') } ``` 2. 子应用需适配微前端路由： ```javascript if (window.__MICRO_APP_ENVIRONMENT__) { __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ } ``` [^4] #### 五、样式冲突问题 **典型现象**：样式污染或失效 **解决方案**： 1. 启用样式隔离（但会影响性能）： ```typescript microApp.start({ disableScopecss: false // 默认值 }) ``` 2. 使用CSS Modules或BEM命名规范 3. 添加应用前缀选择器 #### 六、版本兼容问题 **典型报错**：`TypeError: Cannot read property...` **解决方案**： 1. 保持基座与子应用的技术栈版本对齐 2. 推荐版本组合： ``` @micro-zoe/micro-app@1.0+ Vue2: 2.6+ / Vue3: 3.0+ React: 16.8+ ``` ### 调试建议 1. 开启详细日志： ```typescript microApp.start({ 'disable-memory-router': false, // 显示路由日志 'disable-prefetch': false // 显示预加载日志 }) ``` 2. 使用Chrome DevTools的Application面板检查微应用状态
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值