自己在前端的開發中主要使用vue.js的框架，今天的這篇文章比較基礎，我之前在剛剛接觸vue項目的時候並沒有思考過關於項目是究竟怎麼運行起來的，只知道npm start/npm run dev項目就跑起來了，究竟我在輸入這行命令之後項目是怎麼運行的，分別走了哪幾步，怎麼樣才走到生產環境，什麼情況下又運行了開發環境，然後還有一個test測試環境。我寫下這篇文章的時候對這一部分了解了一些，但自我感覺並不是非常透徹，所以當作一個未完成的任務，文章還會持續的更新
在寫這篇文章的之前我也查閱了好多大神的博客，內容有引用，文章末尾會表明所引文章的出處
首先先說一下創建vue項目的流程(以vue-cli2來舉例)：
1、npm install vue-cli -g //-g是全局安裝，只要不是重裝系統，只安裝一次就可以
2、npm init webpack 項目名稱 //這一步依靠webpack來創建一個項目
3、npm install //安裝相關依賴
4、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配置項這部分的配置項內容上面已經提到，剩下的一部分配置項都是起到什麼作用，等我慢慢更新
如果文章中有不正確的地方還希望各位大佬不吝執教，在此謝過