记录 啥都记的那种 ~
2023.12.31
ERROR in ./src/icons/index.js 2:0-43
Module not found: Error: Can't resolve '@/components/SvgIcon' in 'C:\Users\86151\Desktop\Git本地仓库\mini-wyy\src\icons'
@ ./src/main.js 7:0-23
webpack compiled with 1 error
在我的 ./src/icons/index.js 文件中,我试图从 ‘@/components/SvgIcon’ 导入一些内容,但是Webpack没能在我给出的路径找到该模块。
果然,是我拼写错了,看来不是 webpack 的配置问题。
2023.12.31
main.js:14 [Vue warn]: Unknown custom element: <CommonHeader> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <MainPanel> at src/views/MainPanel.vue
<App> at src/App.vue
<Root>
报错信息 Unknown custom element: <CommonHeader>
表示我在 MainPanel 组件中使用了一个名为 CommonHeader 的组件,但是并没有在 MainPanel 组件中进行注册。
基于组件化的 Vue.js,每个 Vue 组件需要在使用之前注册。Vue 提供了全局注册
和局部注册
两种方式:
全局注册
在入口文件(例如 main.js 或 main.ts)中,可以通过Vue.component(tagName, options) 来进行全局注册,之后就可以在项目的任何位置使用这个组件。例如全局注册 CommonHeader 组件:
import Vue from 'vue'
import CommonHeader from './components/CommonHeader.vue'
Vue.component('CommonHeader', CommonHeader)
局部注册
在每个 Vue 组件的 components 对象中注册其他组件,然后在该组件中使用。例如在 MainPanel 组件中注册 CommonHeader 组件:
import CommonHeader from './components/CommonHeader.vue'
export default {
components: {
CommonHeader
}
}
我的 CommonHeader 不是异步组件,原来是我忘记了了给它注册了,悲痛了,又解决了一个无聊的 bug,嘻嘻。
2023.1.6
C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev>npm run serve
> onediv@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
10% building 2/2 modules 0 active(node:16592) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
10% building 2/4 modules 2 active ...ui-dev\node_modules\webpack\hot\dev-server.jsError: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:138:10)
at module.exports (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:236:3
at runSyncOrAsync (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
at iterateNormalLoaders (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at Array.<anonymous> (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
10% building 2/5 modules 3 active ...组件库\vue-div-ui-dev\vue-div-ui-dev\src\main.jsnode:internal/crypto/hash:69
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:138:10)
at module.exports (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array.<anonymous> (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev\node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v20.5.0
哎哟喂,在运行Vue项目时出现了一些麻烦,报错信息怪怪的:“Error: error:0308010C:digital envelope routines::unsupported”,这是什么鬼?咋看都像是跳梁小丑在捣乱。不过别怕,瞧!这个报错信息,可能是因为我i把 Node.js 更新到了最新版,对吧?给自己点个赞,保持软件版本更新真是个好习惯!
但是,话又说回来,这个错误消息看起来像是来自 Node.js 的底层加密库:OpenSSL。原来是这个家伙搞的鬼啊。新版本的 Node.js 使用了最新版本的 OpenSSL,然后这个OpenSSL可能不支持我项目中使用到的某种加密算法。哎哟嘿,可真是让人头痛。
不过别急,首先,我先试试将 Node.js 降级到稍早一点的版本,嘿嘿,nvm 派上用场了
nvm install 14.17.0
nvm use 14.17.0
又继续报错了
PS C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev> npm run serve
ERROR: npm v10.2.5 is known not to run on Node.js v14.17.0. This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.
ERROR:
C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\agent\lib\agents.js:105
options.lookup ??= this.#options.lookup
^^^
SyntaxError: Unexpected token '??='
at wrapSafe (internal/modules/cjs/loader.js:984:16)
at Module._compile (internal/modules/cjs/loader.js:1032:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\agent\lib\index.js:7:15)
at Module._compile (internal/modules/cjs/loader.js:1068:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
PS C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev>
似乎俺的操作还是让 Node.js 和 npm 之间出现了一些不和谐的情况。
这个报错主要告诉我,“你用的 npm 版本(v10.2.5)和 Node.js 版本(v14.17.0)不太配,他们俩在一起不能很好地工作。这个 npm 版本支持的 Node.js 版本要么是18.17.0以上,要么是20.5.0及以上版本。” 所以俺得升级一下npm,让 Node.js 和 npm 之间和谐相处。
升级 npm 的方法也很简单:
npm install -g npm@latest
这个命令会全局安装最新的 npm 版本。安装完成后,你可以运行 npm -v 来检查下新的 npm 版本。
困难再大,轮不到咱放弃,不就是个小bug嘛,让bug去头皮发麻!加油!
又继续报错了,太好了
C:\Users\86151\Desktop\VUE组件库\vue-div-ui-dev\vue-div-ui-dev>npm install -g npm@latest
ERROR: npm v10.2.5 is known not to run on Node.js v14.17.0. This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.
ERROR:
C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\agent\lib\agents.js:105
options.lookup ??= this.#options.lookup
^^^
SyntaxError: Unexpected token '??='
at wrapSafe (internal/modules/cjs/loader.js:984:16)
at Module._compile (internal/modules/cjs/loader.js:1032:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\agent\lib\index.js:7:15)
at Module._compile (internal/modules/cjs/loader.js:1068:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
Node.js和npm这两家伙怎么又在闹别扭了?咱们可不可以好好相处,跳出这个无尽的误解循环呢?
这报错还是说现在的npm版本(v10.2.5)与Node.js的版本(v14.17.0)不太般配,这就涉及到一个问题呢,它们都是互相有依赖的,对方的版本发生变化,自身也得跟着调整。当你在降级 Node.js 的同时,可能还需要把 npm 也往回调一调。
最简单粗暴的方法,彻底卸载 Node.js 和 npm 后再重装。一般情况下装回来 Node.js 的时候,npm 也就装回来了,版本上也都会比较匹配。下面是在 windows 环境下的卸载步骤:
不不不,我不要这样,我和我的Node.js关系真是好到不能再好,都不舍得和它分开了,那就先试试看升级npm到最新版。
首先,打开PowerShell(命令提示符),以管理员身份运行。
接着运行以下命令安装"npm-windows-upgrade"模块。
npm install --global --production npm-windows-upgrade
然后,使用刚刚安装好的"npm-windows-upgrade"工具来升级npm。
npm-windows-upgrade
就选最新的版本就好了,然后静静等待它执行完。