這篇文章主要介紹vue中npm run dev和npm run build的區(qū)別是什么，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計與策劃設(shè)計,上虞網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:上虞等地區(qū)。上虞做網(wǎng)站價格咨詢:028-86922220

關(guān)于vue的npm run dev和npm run build的區(qū)別介紹，下面就分享給大家，具體如下：

├─build
│  ├─build.js
│  ├─check-versions.js
│  ├─dev-client.js
│  ├─dev-server.js
│  ├─utils.js
│  ├─vue-loader.conf.js
│  ├─webpack.base.conf.js
│  ├─webpack.dev.conf.js
│  ├─webpack.prod.conf.js
│  └─webpack.test.conf.js
├─config
│  ├─dev.env.js
│  ├─index.js
│  ├─prod.env.js
│  └─test.env.js
├─...
└─package.json

以上是關(guān)于bulid與run的所有文件

指令分析

package.json里面

"dev": "node build/dev-server.js",

"build": "node build/build.js",

意思：運行”npm run dev”的時候執(zhí)行的是build/dev-server.js文件，

運行”npm run build”的時候執(zhí)行的是build/build.js文件。

build文件夾分析

build/dev-server.js

npm run dev 執(zhí)行的文件build/dev-server.js文件，執(zhí)行了：

• 檢查node和npm的版本

• 引入相關(guān)插件和配置

• 創(chuàng)建express服務(wù)器和webpack編譯器

• 配置開發(fā)中間件（webpack-dev-middleware）和熱重載中間件（webpack-hot-middleware）

• 掛載代理服務(wù)和中間件

• 配置靜態(tài)資源

• 啟動服務(wù)器監(jiān)聽特定端口（8080）

• 自動打開瀏覽器并打開特定網(wǎng)址（localhost:8080）

說明： express服務(wù)器提供靜態(tài)文件服務(wù)，不過它還使用了http-proxy-middleware，一個http請求代理的中間件。前端開發(fā)過程中需要使用到后臺的API的話，可以通過配置proxyTable來將相應(yīng)的后臺請求代理到專用的API服務(wù)器。

build/webpack.base.conf.js

dev-server依賴的webpack配置是webpack.dev.conf.js文件，

測試環(huán)境下使用的是webpack.prod.conf.js

webpack.dev.conf.js中又引用了webpack.base.conf.js

webpack.base.conf.js主要完成了下面這些事情：

• 配置webpack編譯入口

• 配置webpack輸出路徑和命名規(guī)則

• 配置模塊resolve規(guī)則

• 配置不同類型模塊的處理規(guī)則

這個配置里面只配置了.js、.vue、圖片、字體等幾類文件的處理規(guī)則，如果需要處理其他文件可以在module.rules里面配置。

build/webpack.dev.conf.js

在webpack.base.conf的基礎(chǔ)上增加完善了開發(fā)環(huán)境下面的配置，主要包括下面幾件事情：

將hot-reload相關(guān)的代碼添加到entry chunks

• 合并基礎(chǔ)的webpack配置

• 使用styleLoaders

• 配置Source Maps

• 配置webpack插件

build/check-versions.js和build/dev-client.js

最后是build文件夾下面兩個比較簡單的文件，

dev-client.js似乎沒有使用到，代碼也比較簡單，這里不多講。

check-version.js完成對node和npm的版本檢測

build/utils.js和build/vue-loader.conf.js

webpack配置文件中使用到了utils.js和vue-loader.conf.js這兩個文件，utils主要完成下面3件事：

• 配置靜態(tài)資源路徑

• 生成cssLoaders用于加載.vue文件中的樣式

• 生成styleLoaders用于加載不在.vue文件中的單獨存在的樣式文件

vue-loader.conf則只配置了css加載器以及編譯css之后自動添加前綴。

build/build.js

構(gòu)建環(huán)境下的配置，

build.js主要完成下面幾件事：

• loading動畫

• 刪除創(chuàng)建目標(biāo)文件夾

• webpack編譯

• 輸出信息

build/webpack.prod.conf.js

構(gòu)建的時候用到的webpack配置來自webpack.prod.conf.js，該配置同樣是在webpack.base.conf基礎(chǔ)上的進(jìn)一步完善。主要完成下面幾件事情：

• 合并基礎(chǔ)的webpack配置

• 使用styleLoaders

• 配置webpack的輸出

• 配置webpack插件

• gzip模式下的webpack插件配置

• webpack-bundle分析

說明： webpack插件里面多了丑化壓縮代碼以及抽離css文件等插件。

config文件夾分析

config/index.js

config文件夾下最主要的文件就是index.js了，

在這里面描述了開發(fā)和構(gòu)建兩種環(huán)境下的配置，前面的build文件夾下也有不少文件引用了index.js里面的配置。

config/dev.env.js、config/prod.env.js和config/test.env.js

這三個文件就簡單設(shè)置了環(huán)境變量而已，沒什么特別的。

這是webpack的基本入門，webpack還有很多插件，還需要去探索

后面寫這幾個文件的源碼解釋。

以上是“vue中npm run dev和npm run build的區(qū)別是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱：vue中npmrundev和npmrunbuild的區(qū)別是什么-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://sd-ha.com/article4/jjgie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、做網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站內(nèi)鏈、動態(tài)網(wǎng)站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)