項目在啓動時到底是怎麼運行的（項目運行的步驟）

本身在前端的開發中主要使用vue.js的框架，今天的這篇文章比較基礎，我以前在剛剛接觸vue項目的時候並無思考過關於項目是究竟怎麼運行起來的，只知道npm start/npm run dev項目就跑起來了，究竟我在輸入這行命令以後項目是怎麼運行的，分別走了哪幾步，怎麼樣才走到生產環境，什麼狀況下又運行了開發環境，而後還有一個test測試環境。我寫下這篇文章的時候對這一部分了解了一些，但自我感受並非很是透徹，因此看成一個未完成的任務，文章還會持續的更新
在寫這篇文章的以前我也查閱了好多大神的博客，內容有引用，文章末尾會代表所引文章的出處

---

首先先說一下建立vue項目的流程(以vue-cli2來舉例)：
一、npm install vue-cli -g //-g是全局安裝，只要不是重裝系統，只安裝一次就能夠
二、npm init webpack 項目名稱 //這一步依靠webpack來建立一個項目
三、npm install //安裝相關依賴
四、npm run dev/npm start //運行項目
對於第四點，爲何有兩個選擇，這要看你建立好項目以後的package.json這個文件，文件中有scripts對象，對象中能夠看到有start屬性和dev屬性。當執行了npm start命令，也就等同於執行了npm run dev這個命令，而這個命令，就是執行了開發環境

在dev這個對象的值中能夠看到，命令最終走到了build文件夾下的webpack.dev.conf.js這個文件裏，找到這個文件

打開這個文件能夠看到有devServe的對象，對象屬性中有主機名，端口號，還有publicPath和配置的反向代理。這些屬性的屬性值都是以config.dev開頭的。而config又是引入的config文件夾下的index.js

點開index.js文件
在文件中找到dev的配置項
在配置項中能夠看到有下面幾項
assetsSubDirectory //除了index.html以外的靜態資源要存放的路徑
assetsPublicPath //表明打包後，index.html裏引用資源的相對地址
proxyTable //在這個裏面能夠配置反向代理
host //主機名
port //端口號
autoOpenBrowser //是否自動打開瀏覽器

---

順便說一下這個文件中下面的build配置項
index：path.resolve(__dirname, '../dist/index.html') //模板
assetsRoot： path.resolve(__dirname, '../dist') //打包後文件要存放的路徑，通常爲dist
assetsSubDirectory：'static' //把全部的靜態文件打包到dist文件下的static文件內
assetsPublicPath：'/' //表明生成的index.html文件，裏面引入資源時，路徑前面要加上 / （本人感受仍是挺重要的，要記住）

---

再插一句，我如今是用的vue-cli2搭建的項目，若是是vue-cli3搭建的話assetsPublicPath的配置內容就換位置咯，屬性名都換了=>vue.config.js中的publicPath的屬性下配置

---

這樣開發環境的相關流程就走完了，接下來是三大環境中剩下的生產環境
首先，生產環境是怎麼來的，也就是說，我執行怎樣的語句或者命令，項目就認爲我是一個生產環境，沒錯，這個命令就是 npm run build，執行這個語句的動做就是打包項目
首先看圖說話

執行命令以後就走build文件夾下的build.js文件，打開build.js，看到下圖

說明一下：
build文件夾下的webpack.prod.conf.js文件裏面是對生產環境作的一些環境配置
另外看一下config文件夾下的index.js文件內的build配置項這部分的配置項內容上面已經提到，剩下的一部分配置項都是起到什麼做用，等我慢慢更新

若是文章中有不正確的地方還但願各位大佬不吝執教，在此謝過