Vue更新報錯排查修復

vue運行報錯

報錯描述These dependencies were not found

vue前端項目更新以後,運行報錯

ERROR  Failed to compile with 5 errors                                                                      下午3:51:42
These dependencies were not found:
* heatmap.js in ./node_modules/[email protected]@babel-loader/lib!./node_modules/[email protected]@vue-loader/lib/sel
ector.js?type=script&index=0!./src/pages/work/problem.vue
* vue-baidu-map/components/map/Map.vue in ./src/main.js, ./node_modules/[email protected]@babel-loader/lib!./node_modu
les/[email protected]@vue-loader/lib/selector.js?type=script&index=0!./src/pages/work/problem.vue
* vue-baidu-map/components/map/MapView.vue in ./node_modules/[email protected]@babel-loader/lib!./node_modules/_vue-lo
[email protected]@vue-loader/lib/selector.js?type=script&index=0!./src/pages/work/problem.vue
* vue-baidu-map/components/search/LocalSearch.vue in ./node_modules/[email protected]@babel-loader/lib!./node_modules/
[email protected]@vue-loader/lib/selector.js?type=script&index=0!./src/pages/work/problem.vue

To install them, you can run: npm install --save heatmap.js vue-baidu-map/components/map/Map.vue vue-baidu-map/component
s/map/MapView.vue vue-baidu-map/components/search/LocalSearch.vue
> Listening at http://localhost:8066

更新代碼後,運行"npm run dev" 命令報錯,是因爲提交地圖相關代碼,需要插件支持,因此下面開始下載插件

1.下載 heatmap.js

D:\workspace_hbuilder\vue-admin-master>cnpm install --save heatmap.js
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 346ms(network 343ms), speed 321kB/s, json 1(572B
), tarball 109.54kB)

2.下載 vue-baidu-map

D:\workspace_hbuilder\vue-admin-master>cnpm install --save vue-baidu-map
√ Installed 1 packages
√ Linked 12 latest versions
√ Run 0 scripts
peerDependencies link [email protected] in D:\workspace_hbuilder\vue-admin-master\node_modules\[email protected]@vue-baidu
-map unmet with D:\workspace_hbuilder\vue-admin-master\node_modules\vue(2.6.11)
Recently updated (since 2020-08-19): 1 packages (detail see file D:\workspace_hbuilder\vue-admin-master\node_modules\.re
cently_updates.txt)
√ All packages installed (11 packages installed from npm registry, used 1s(network 1s), speed 896.03kB/s, json 13(59.31
kB), tarball 1.07MB)

vue 打包報錯ERROR in xx.js from UglifyJs

ERROR in static/js/1.b1bd2364d7d04826fb20.js from UglifyJs
Unexpected token: operator (>) [./node_modules/[email protected]@vue-baidu-map/components/base/mixins/common.js:16,
0][static/js/1.b1bd2364d7d04826fb20.js:40844,30]

ERROR in static/js/vendor.96c0ded070a832778c51.js from UglifyJs
Unexpected token: operator (>) [./node_modules/[email protected]@vue-baidu-map/components/base/bindEvent.js:5,0][st
atic/js/vendor.96c0ded070a832778c51.js:49854,26]
  Build failed with errors.

1.錯誤原因

在 UglifyJs 的 github issues #78 找到了這樣一個解決方案:由於 UglifyJs 只支持 ES5 而 element-ui 可能引入了一部分 ES6 的寫法,所以導致 webpack 打包失敗。 issue 裏最後給出的解決方案是用 beta 版本的Uglify-es 來代替 UglifyJs(Beta 版本引入了對 ES2015+)的支持。需要在前端工作目錄下用執行命令

cnpm i -D uglifyjs-webpack-plugin@beta

2.錯誤解決

修改前端文件夾下的build/webpack.base.conf.js 文件即可,修改如下: 修改前

module: {
rules: [
...
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
...]
}

修改後

module: {
rules: [
...
{
test: /\.js$/,
loader: 'babel-loader',//注意elementUI的源碼使用ES6需要解析
include: [resolve('src'), resolve('test'),
resolve('/node_modules/[email protected]@vue-baidu-map')  // <<------ add code
]
},
...]
}

相當於將 element-ui 加入需要 babel 解析的包中,之後再次執行 npm run build, build 成功。

參考:https://blog.csdn.net/sing_sing/article/details/79146265?utm_source=blogxgwz6

參考:https://www.cnblogs.com/learnoffs/p/7872154.html

參考:https://blog.csdn.net/Uncle_long/article/details/80336680

快速刪除node_modules

這個node_modules目錄,在windows上刪除特別慢,跟中病毒似的。處理方法如下:

1.安裝rimraf

在全局安裝rimraf模塊:

D:\workspace_hbuilder\vue-admin-master>cnpm install rimraf -g

2.命令刪除

然後通過其命令來快速刪除node_modules目錄

D:\workspace_hbuilder\vue-admin-master>rimraf node_modules

3.下載

重新環境支持:下載node_modules環境

D:\workspace_hbuilder\vue-admin-master>cnpm install

4.運行vue

D:\workspace_hbuilder\vue-admin-master>npm run dev

參考node_modules目錄刪除方法:https://www.cnblogs.com/25miao/p/12706845.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章