二、config資料夾分析
三、vue專案工程中執行npm run dev 命令之後執行了哪些操作
├─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
以上是關於bulid與run的所有檔案
指令分析
package.json裡面
"dev"
:"node build/dev-server.js"
,"build"
:"node build/build.js"
,
執行」npm run build」的時候執行的是build/build.js檔案。
build/dev-server.js
npm run dev 執行的檔案build/dev-server.js檔案，執行了：
說明：build/webpack.base.conf.jsexpress伺服器提供靜態檔案服務，不過它還使用了http-proxy-middleware，乙個http請求**的中介軟體。前端開發過程中需要使用到後台的api的話，可以通過配置proxytable來將相應的後台請求**到專用的api伺服器。
dev-server依賴的webpack配置是webpack.dev.conf.js檔案，
測試環境下使用的是webpack.prod.conf.js
webpack.dev.conf.js中又引用了webpack.base.conf.js
webpack.base.conf.js主要完成了下面這些事情：
配置webpack編譯入口
配置webpack輸出路徑和命名規則
配置模組resolve規則
配置不同型別模組的處理規則
這個配置裡面只配置了.js、.vue、、字型等幾類檔案的處理規則，如果需要處理其他檔案可以在module.rules裡面配置。
build/webpack.dev.conf.js
在webpack.base.conf的基礎上增加完善了開發環境下面的配置，主要包括下面幾件事情：
將hot-reload相關的**新增到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件事：
build/build.js
構建環境下的配置，build.js主要完成下面幾件事：
build/webpack.prod.conf.js
構建的時候用到的webpack配置來自webpack.prod.conf.js，該配置同樣是在webpack.base.conf基礎上的進一步完善。主要完成下面幾件事情：
說明： webpack外掛程式裡面多了醜化壓縮**以及抽離css檔案等外掛程式。config/index.js
config資料夾下最主要的檔案就是index.js了，
在這裡面描述了開發和構建兩種環境下的配置，前面的build資料夾下也有不少檔案引用了index.js裡面的配置。
config/dev.env.js、config/prod.env.js和config/test.env.js
這三個檔案就簡單設定了環境變數而已，沒什麼特別的。
這是webpack的基本入門，webpack還有很多外掛程式，還需要去探索
1.npm run dev是執行配置在package.json中的指令碼，比如：
"scripts"
:
var config =
)
在webpack.base.conf.js檔案中呼叫了./src/main.js
import vue from
'vue'
import router from
'./router'
import mint from
'mint-ui'
var jquery =
require
('jquery');
vue.config.productiontip =
false
/* eslint-disable no-new */
newvue
(
new
htmlwebpackplugin
()
npm run dev時遇到的問題
第一篇部落格 npm run dev時 19 verbose npm v6.14.4 20 error code elifecycle 21 error errno 1 22 error vue admin template 4.2 1 dev vue cli service serve 22 er...
閱讀npm run dev命令後的配置項
dev webpack dev server inline progress config build webpack.dev.conf.js 該命令讀取配置檔案webpack.dev.config.js 我們先大致瞥一眼webpack.dev.config.js,發現它引入了webpack基礎配置...
vue生命週期created 前做了什麼
我們在做專案時，通常會在元件created 鉤子函式中請求後端介面，得到資料後渲染檢視，這樣可以達到切換到對應頁面，即可顯示後端資料。問題 vue生命週期created 前做了什麼？我們可以看到，官網上給出的是，created 之前執行了初始化注入 初始化化校驗。從vue2原始碼看看 路徑 vue ...