Vue項(xiàng)目npm操作npm run serve或npm run dev報(bào)錯(cuò)及二者的區(qū)別
問(wèn)題分析
我們?cè)趩?dòng)vue項(xiàng)目的時(shí)候，需要用到npm操作，比如使用npm run serve或npm run dev。
比如說(shuō)我們下載其他人的開(kāi)源vue項(xiàng)目時(shí)，我們想在本地運(yùn)行時(shí)，我們用的到npm run serve或npm run dev有時(shí)候會(huì)出現(xiàn)報(bào)錯(cuò)，無(wú)論是serve還是dev都有出現(xiàn)報(bào)錯(cuò)的情況。
報(bào)錯(cuò)原因
這個(gè)是npm run serve報(bào)錯(cuò)的原因，錯(cuò)誤很簡(jiǎn)單，重點(diǎn)看這一句Missing script: "serve"
然后找到package.json，查看"script"這個(gè)對(duì)象，script里面確實(shí)沒(méi)有serve，而是dev
然后用npm run dev來(lái)啟動(dòng)vue項(xiàng)目，發(fā)現(xiàn)項(xiàng)目可以啟動(dòng)成功
同理，npm run dev報(bào)錯(cuò)情況也是這樣解決，直接上圖
二者區(qū)別
首先我們要知道"script"是什么?
翻譯一下
因此我們可以知道不論是dev還是serve等這些值代表了該點(diǎn)可以run的命令
所以我們?cè)谶\(yùn)行 npm run serve 的時(shí)候，其實(shí)是在運(yùn)行命令 vue-cli-service serve 。
通過(guò)上面的例子，我們可以看到，在package.json的script對(duì)象里，無(wú)論是serve還是dev對(duì)應(yīng)的命令都是vue-cli-service serve，那么二者有什么區(qū)別呢？
通過(guò)對(duì)比腳手架版本(vue-cli)，我們可以發(fā)現(xiàn)不同的版本默認(rèn)配置是不一樣的
- vue-cli2.0中
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
- vue-cli3.0中
"serve": "vue-cli-service serve",
因此我們?cè)趩?dòng)vue項(xiàng)目時(shí)，我們可以先查看清楚腳手架的版本(查看package.json)，再去啟動(dòng)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- npm run dev和npm run serve的區(qū)別小結(jié)
- vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module node:url
- npm run dev報(bào)錯(cuò)信息及解決方法
- 運(yùn)行npm?run?dev報(bào)錯(cuò)的原因及解決
- 使用vue-cli初始化項(xiàng)目時(shí)運(yùn)行‘npm run dev’報(bào)錯(cuò)及解決
- npm?run?dev失敗的簡(jiǎn)單解決辦法
- 詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁(yè)面cannot GET/問(wèn)題
- 關(guān)于vue的npm run dev和npm run build的區(qū)別介紹
- 詳解Vue項(xiàng)目在其他電腦npm run dev運(yùn)行報(bào)錯(cuò)的解決方法
- Vue項(xiàng)目npm run dev啟動(dòng)失敗的6個(gè)常見(jiàn)原因(附解決方案)
相關(guān)文章
這篇文章主要介紹了vue表格(table)計(jì)算總計(jì)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了解讀Vue實(shí)例的屬性及模板渲染問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue多次循環(huán)操作,結(jié)合實(shí)例形式分析了vue.js針對(duì)json嵌套數(shù)據(jù)的多次循環(huán)讀取操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02
vue 代碼高亮插件全面對(duì)比測(cè)評(píng)
這篇文章主要介紹了vue 代碼高亮插件全面對(duì)比測(cè)評(píng)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue3響應(yīng)式對(duì)象數(shù)組不能實(shí)時(shí)DOM更新問(wèn)題解決辦法
在寫大文件上傳時(shí),碰到關(guān)于 vue2 跟 vue3 對(duì)在循環(huán)中使用異步,并動(dòng)態(tài)把普通對(duì)象添加進(jìn)響應(yīng)式數(shù)據(jù),在異步前后修改該普通對(duì)象的某個(gè)屬性,導(dǎo)致 vue2 跟 vue3 的視圖更新不一致,引發(fā)一系列的思考,所以本文介紹了Vue3響應(yīng)式對(duì)象數(shù)組不能實(shí)時(shí)DOM更新問(wèn)題解決辦法2024-07-07
說(shuō)到Vue緩存，我們肯定首先選擇官方提供的緩存方案keep-alive，本文主要介紹了詳解Vue適時(shí)清理keepalive緩存方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue單頁(yè)緩存方案分析及實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue template中slot-scope/scope的使用方法
今天小編就為大家分享一篇vue template中slot-scope/scope的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
使用Element+vue實(shí)現(xiàn)開(kāi)始與結(jié)束時(shí)間限制
這篇文章主要為大家詳細(xì)介紹了使用Element+vue實(shí)現(xiàn)開(kāi)始與結(jié)束時(shí)間限制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue3實(shí)現(xiàn)拖拽圖片四角調(diào)整圖片大小的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3實(shí)現(xiàn)拖拽圖片四角調(diào)整圖片大小的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-10-10