启动vue项目报错Cannot read property ‘version‘ of undefined

最新推荐文章于 2023-09-09 23:57:38 发布
原创 最新推荐文章于 2023-09-09 23:57:38 发布 · 1.7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文讲述了在使用Vue CLI 4 构建Vue 2.0项目时遇到的'Cannot read property 'version' of undefined'错误，通过卸载eslint并移除相关配置解决了问题，适合Vue开发者参考。

场景

今天在使用vue-cli4的版本创建vue2.0项目时，发现执行了yarn serve报错。错误如下图

Cannot read property 'version' of undefined

解决

最终从网上搜索多篇解决方案后，采用了如下方案解决了问题。
第1步：卸载eslint

yarn remove eslint --save

第2步：在package.json里将下图代码删除

"@vue/cli-plugin-eslint": "~4.5.0"

ok

uniapp(微信小程序) - 解决报错TypeError: Cannot read property ‘get‘ of undefined（Uniapp编译运行到微信小程序 开发者工具出现错误提示）
高级前端工程师
04-25 1万+
uniapp，微信小程序，Uniapp微信小程序报错TypeError: Cannot read property ‘get‘ of undefined，uniApp编译微信小程序平台报错，如何解决小程序端报错，微信开发者工具报错，uniapp报错提示Cannot read property ‘get‘ of undefined，uniapp就微信小程序端提示错误，uni-app打包微信小程序，UNIAPP构建微信小程序报错，开发者工具控制台出错，uniapp运行到小程序平台报错，找不到定义，导入模块以及定
uniapp报错：TypeError: Cannot read properties of undefined (reading ‘replace‘) 无法读取未定义的属性（读取 ‘replace‘）
最新发布
高级前端工程师
10-04 4231
TypeError: Cannot read properties of undefined (reading ‘replace‘)，uniapp报错提示，尝试访问未定义对象的replace属性导致，uniapp浏览器控制台报错，uniapp微信小程序报错，uniapp H5网页提示错误，Uniapp APP端报错如何解决，uniapp安卓苹果ios错误，uniapp尝试运行uni.navigateTo的时候没能实现跳转，并卡住显示类似，uniapp页面跳转报错，详细排查和解决方案，怎么解决这个报错，代码没
Cannot read property ‘version‘ of undefined TypeError: Cannot read property ‘version‘ of undefined
热门推荐
qq_42648288的博客
03-25 1万+
在VUE项目中遇到以下报错:Cannot read property 'version' of undefined TypeError: Cannot read property 'version' of undefined at module.exports (/redball_download/node_modules/@vue/cli-plugin-eslint/index.js:20:27) 如图： 这个错误是代码检测工具eslint的报错 上面错误大致原因为我删除了在package.js.
vue报错： ERROR TypeError: Cannot read property 'version' of undefined
祈澈菇凉
08-23 1516
在打开项目的时候 输入命令npm run serve 运行项目发现了这样的报错 导致项目无法运行 ERROR TypeError: Cannot read property 'version' of undefined 这里在创建项目的时候 使用到代码检测工具eslint的报错 解决办法 eslint比较麻烦 咱们用不惯 就直接删掉吧 1:在控制台输入 npm uninstall es...
Cannot read property ‘version‘ of undefined TypeError Cannot read property ‘version‘ of undefined
weixin_45932157的博客
06-20 1094
在VUE项目中遇到以下报错:Cannot read property ‘version’ of undefined。那么以后记得创建项目避开ESlint。
TypeError: Cannot read property ‘version‘ of undefined
weixin_48145150的博客
04-02 4904
启动vue项目的时候报错：TypeError: Cannot read property 'version' of undefined 这个错误是eslint的报错，原因是因为我之前清除了eslin的配置，导致在依赖包中找不到相对应的东西。 解决方法： 重新下载一些依赖包，直接在使用命令npm install， 依赖下载完之后，重新启动项目npm run serve，然后就可以了。 ...
安装最新 Jest 报错：TypeError: Cannot read property ‘instrument‘ of undefined
Dreamy_LIN的博客
11-11 4065
背景： 为了在已有的项目中加入 Jest ，踩了不少坑，坑列举如下，采用过的解决方式，出现的新问题，最终的处理手段。 首先，我的项目是 Vue2，package.json 的 babel 为 @babel，因此才会出现以下种种问题。若为 babel，正常 npm install -g jest 配置脚本即可，后面会有说明。Vue3 的 Jest 安装更为简单，本篇不涉及。 坑1： 直接在 Vue 项目中运行，报错 requires Babel "^7.0.0-0", but was loaded with
vue项目启动报 TypeError: Cannot read property 'version' of undefined
D_bel的博客
05-12 1万+
启动项目的时候报了个错误，如下图 首先我执行了：npm install eslint，有时候执行了这句就可以的了。但是我本地发现又报了另外一个错误Cannot find module 'vue-template-compiler/package.json' 然后我又执行了npm install vue-template-compiler发现还是报错，提示我you can run: npm install --save register-service-worker vue vue-router.
vue v-if : "TypeError: Cannot read property 'length' of undefined"
李古拉雷
04-09 7623
在使用v-if判断一个数组大小为0时，会出现 length 是undefined的错误： [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined" 错误代码： <group v-if="item.detailEntityList.length===0" style="m...
解决：ERROR TypeError: Cannot read properties of undefined (reading ‘version‘)
weixin_51551506的博客
11-12 5896
先在终端输入命令 ​ npm uninstalleslint--savey
TypeError: Cannot read property ‘version‘ of undefined（已解决）
秃头小吴
07-07 4707
最近在学习vue3项目，练习的时候因为觉得eslint不需要。就给删除了，然后后面再次安装依赖，准备运行项目时，出现了以下报错 后面重新使用npm install eslint 安装eslint ，然后重新安装依赖npm install ,在次使用npm run serve 便成功了，在这里记录以下，希望对小伙伴们有帮助 ...
Vue报错 TypeError Cannot read properties of undefined (reading ‘protocol‘)
m0_67393828的博客
03-06 9673
Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘protocol’) 报错信息: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol') at isURLSameOrigin (isURLSameOrigin.js?3934:57) at dispatchXh
【已解决】[Vue warn]：Error in render “TypeError Cannot read property ‘‘ of undefined“
m0_67403143的博客
03-02 2527
文章目录 一、发现问题 二、问题解决 方法一 方法二 方法三 三、原因解析 一、发现问题 在vue项目中发现报错：[Vue warn]：Error in render: “TypeError: Cannot read property ‘***’ of undefined” 虽然有报错但是对项目没有发现明显影响（我遇到两次都是使用数组中首项属性值时发生，其他情况还需另斟酌） 二、问题解决 两种方法： 方法一 标签中通过v-if="tabsTree[0]"提前截获 <span slot="
vue运行报错ERROR TypeError: Cannot read properties of undefined (reading ‘version‘)
qq_43569032的博客
09-09 2546
vue运行报错TypeError的解决办法
Vue报错“ Uncaught TypeError: Cannot read property ‘use‘ of undefined”
jakelihua
06-05 4861
回到前端代码，发现这里使用了Vue.use，但是上面错误提示里面显示里面没有，原因是因为下面这个写法是Vue2的写法，vue3的话需要修改一下。这个错误说的是use这个方法没有定义。
打包好electron项目，安装报错cannot read property 'app' of undefined
06-17
<think>我们正在解决Electron项目打包后安装报错"cannotreadproperty'app'ofundefined"的问题。根据之前的讨论，这个错误通常是由于在渲染进程中直接访问了主进程模块（如`electron.app`）而导致的，特别是在上下文隔离（contextisolation）启用的情况下。参考引用：[^1]提到一个错误：'Electronfailedtoinstallcorrectly'，建议删除node_modules/electron并重新安装。但我们的问题不同，所以这个引用可能不直接相关。[^2]提到了一个类似的错误：`Cannotreadproperty'upgrade'ofundefined`，但这是webpack-dev-server的问题，与我们的问题不同。[^3]是关于Linux下打包的配置问题，与我们的错误无关。[^4]提供了一个解决方案：在创建BrowserWindow时设置webPreferences，包括`nodeIntegration:true`和`contextIsolation:false`。这是一个常见的解决方案，但需要注意安全性。然而，根据最佳实践，我们不应该完全禁用上下文隔离，因为这会带来安全风险。我们应该通过预加载脚本和安全地暴露API来解决。因此，我们按照以下步骤解决：步骤1：确保主进程中创建窗口时配置了预加载脚本，并保持上下文隔离启用（contextIsolation:true）。步骤2：在预加载脚本中使用contextBridge暴露必要的API（例如app的信息）。步骤3：在主进程中通过ipcMain处理来自渲染进程的请求。步骤4：在渲染进程中使用暴露的API，而不是直接使用`electron.app`。具体代码实现如下：1.主进程（main.js）中：```javascriptconst{app,BrowserWindow,ipcMain}=require('electron');constpath=require('path');functioncreateWindow(){constmainWindow=newBrowserWindow({webPreferences:{contextIsolation:true,//启用上下文隔离preload:path.join(__dirname,'preload.js')//指定预加载脚本}});mainWindow.loadFile('index.html');}app.whenReady().then(()=>{createWindow();//处理获取应用路径的请求ipcMain.handle('get-app-path',(event)=>{returnapp.getAppPath();});});```2.预加载脚本（preload.js）中：```javascriptconst{contextBridge,ipcRenderer}=require('electron');//安全地暴露一些API给渲染进程contextBridge.exposeInMainWorld('electronAPI',{getAppPath:()=>ipcRenderer.invoke('get-app-path')});```3.在渲染进程（例如index.html中的脚本）中：```javascript//不要直接使用require('electron')，而是使用我们暴露的APIwindow.electronAPI.getAppPath().then(path=>{console.log('应用路径：',path);});```这样，我们就安全地在渲染进程中获取了主进程中app的路径，而不会出现`cannotreadproperty'app'ofundefined`错误。注意：如果之前错误是因为在渲染进程中直接使用`const{app}=require('electron')`，那么现在应该删除这样的代码，改为使用预加载脚本暴露的API。另外，如果因为某些原因（比如遗留代码）需要快速修复，并且项目不需要考虑安全性（例如只是一个本地应用），可以临时采用引用[4]的方法：在创建BrowserWindow时设置：```javascriptwebPreferences:{nodeIntegration:true,contextIsolation:false}```但强烈建议不要长期使用，因为这会带来安全风险。最后，如果问题仍然存在，请检查打包配置。确保在打包过程中，预加载脚本和主进程脚本都被正确包含。不同的打包工具（如electron-builder或electron-packager）配置方式不同，但通常需要在package.json中指定。例如，使用electron-builder时，在package.json中配置：```json"build":{"files":["dist/**/*","main.js","preload.js"]}```这样，打包后的应用才会包含这些脚本。总结：通过安全地使用预加载脚本和进程间通信，可以解决这个错误，同时保持应用的安全性。如果按照上述步骤操作后问题仍然存在，请提供更多错误上下文，以便进一步排查。§§相关问题§§1.如何在Electron中安全地暴露Node.js模块给渲染进程？2.Electron中主进程与渲染进程通信的几种方式？3.使用electron-builder打包时如何包含额外文件？</think>针对 Electron 打包后安装报错 "cannot read property 'app' of undefined" 的问题，结合引用内容和最佳实践，以下是系统化的解决方案： --- ### 核心问题分析 该错误发生在渲染进程尝试访问主进程专属的 `electron.app` API，通常由以下原因导致： 1. **上下文隔离未正确处理**（Electron 12+ 默认启用） 2. **预加载脚本未正确暴露 API** 3. **框架集成配置错误**（如 Vue/React） 4. **打包过程遗漏关键文件** --- ### 分步解决方案 #### 1. **修复预加载脚本**（安全推荐方案） ```javascript // preload.js const { contextBridge, ipcRenderer } = require('electron') contextBridge.exposeInMainWorld('electronAPI', { getAppInfo: () => ipcRenderer.invoke('get-app-info') }) ``` #### 2. **主进程添加 IPC 处理器** ```javascript // main.js const { app, ipcMain } = require('electron') ipcMain.handle('get-app-info', () => ({ version: app.getVersion(), path: app.getAppPath() })) ``` #### 3. **安全配置 BrowserWindow**（禁用危险方案[^4]） ```javascript // main.js - 安全配置 new BrowserWindow({ webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true, // 必须启用 nodeIntegration: false // 保持禁用 } }) ``` #### 4. **渲染进程正确调用** ```javascript // 渲染进程代码（如 React/Vue 组件） window.electronAPI.getAppInfo() .then(info => console.log('App version:', info.version)) ``` #### 5. **修复打包配置**（关键步骤） 1. 确保打包包含预加载脚本： ```json // package.json "build": { "files": ["dist/**/*", "!node_modules", "main.js", "preload.js"] } ``` 2. 重新安装 Electron 模块[^1]： ```bash rm -rf node_modules/electron npm install --save-dev electron ``` #### 6. **框架特定修复** **Vue CLI Electron 插件**： ```javascript // background.js require('@electron/remote/main').initialize() win = new BrowserWindow({ webPreferences: { preload: path.join(__dirname, 'preload.js') } }) ``` --- ### 错误方案警告 ```diff // 危险！仅限临时测试 new BrowserWindow({ webPreferences: { - contextIsolation: false, - nodeIntegration: true, - enableRemoteModule: true } }) ``` > 此方案虽然能临时解决错误[^4]，但会暴露严重安全漏洞，**禁止在生产环境中使用** --- ### 完整验证流程 1. 本地测试： ```bash npm run electron:serve ``` 2. 检查控制台是否报错 3. 重新打包： ```bash npm run electron:build ``` 4. 安装测试生成的可执行文件（注意 Linux 分类问题[^3]） --- ### 典型错误场景修复 **Webpack 合并错误**： ```javascript // 解决引用[2]的 webpack-dev-server 错误 module.exports = { devServer: { hot: false, // 禁用 HMR liveReload: false } } ``` --- ### 安全准则 1. **始终启用** `contextIsolation` 2. **永远禁止** `nodeIntegration` 3. 通过 `contextBridge` 暴露最小必要 API 4. 使用 IPC 进行进程通信 > 遵循这些步骤可解决 95% 的 "app of undefined" 错误[^1][^4]。若问题依旧，请检查 Electron 版本兼容性（建议 ≥15.x）。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值