Vue項(xiàng)目npm操作npm run serve或npm run dev報(bào)錯(cuò)及二者的區(qū)別

更新時(shí)間：2023年10月30日 15:06:49 作者：黛琳ghz

這篇文章主要介紹了Vue項(xiàng)目npm操作npm run serve或npm run dev報(bào)錯(cuò)及二者的區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3+TS實(shí)現(xiàn)數(shù)字滾動(dòng)效果CountTo組件
最近開(kāi)發(fā)有個(gè)需求需要酷炫的文字滾動(dòng)效果，發(fā)現(xiàn)vue2版本的CountTo組件不適用與Vue3,沒(méi)有輪子咋辦，那咱造一個(gè)唄，感興趣的小伙伴可以跟隨小編一起了解一下
2022-11-11
vue中關(guān)于redirect(重定向)初學(xué)者的坑
這篇文章主要介紹了vue中關(guān)于redirect(重定向)初學(xué)者的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue中?根據(jù)判斷條件添加一個(gè)或多個(gè)style及class的寫法小結(jié)
這篇文章主要介紹了vue中?根據(jù)判斷條件添加一個(gè)或多個(gè)style及class的寫法,文中給大家補(bǔ)充介紹了關(guān)于vue里:class的使用結(jié)合自己的實(shí)現(xiàn)給大家講解，需要的朋友可以參考下
2023-03-03
Vue實(shí)現(xiàn)萬(wàn)年日歷的示例詳解
又是一個(gè)老生常談的功能，接下來(lái)會(huì)從零實(shí)現(xiàn)一個(gè)萬(wàn)年日歷，從布局到邏輯，再到隨處可見(jiàn)的打卡功能。文中的示例代碼簡(jiǎn)潔易懂，需要的可以參考一下
2023-01-01
在Vue3項(xiàng)目中關(guān)閉ESLint的完整步驟
實(shí)際上在學(xué)習(xí)過(guò)程中,你會(huì)發(fā)現(xiàn)eslint檢查特別討厭,這個(gè)時(shí)候我們需要關(guān)閉掉eslint檢查,下面這篇文章主要給大家介紹了關(guān)于在Vue3項(xiàng)目中關(guān)閉ESLint的完整步驟,需要的朋友可以參考下
2023-11-11
vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)
這篇文章主要介紹了vue的v-if里實(shí)現(xiàn)調(diào)用函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue Cli項(xiàng)目重構(gòu)為Vite的方法步驟
本文主要介紹了Vue Cli項(xiàng)目重構(gòu)為Vite的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vite中自制mock服務(wù)器(不使用第三方服務(wù))
本文主要介紹了Vite中自制mock服務(wù)器，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
VUE配置history路由模式配置詳細(xì)舉例
這篇文章主要給大家介紹了關(guān)于VUE配置history路由模式配置的相關(guān)資料,History模式是Vue路由的另一種模式,在History模式下URL中的路徑不再使用#符號(hào),而是直接使用正常的路徑形式,需要的朋友可以參考下
2023-12-12
Vue?uni-app以H5模式引入Jquery配置教程
這篇文章主要為大家介紹了Vue?uni-app以H5模式引入Jquery配置教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09