關(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í)行了：

說明： 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主要完成了下面這些事情：

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

build/webpack.dev.conf.js

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

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

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件事：