資訊專欄INFORMATION COLUMN
摘要：自己在前端的開發(fā)中主要使用的框架，今天的這篇文章比較基礎(chǔ)，我之前在剛剛接觸項(xiàng)目的時(shí)候并沒有思考過關(guān)于項(xiàng)目是究竟怎么運(yùn)行起來的，只知道項(xiàng)目就跑起來了，究竟我在輸入這行命令之后項(xiàng)目是怎么運(yùn)行的，分別走了哪幾步，怎么樣才走到生產(chǎn)環(huán)境，什么情況下又
自己在前端的開發(fā)中主要使用vue.js的框架，今天的這篇文章比較基礎(chǔ)，我之前在剛剛接觸vue項(xiàng)目的時(shí)候并沒有思考過關(guān)于項(xiàng)目是究竟怎么運(yùn)行起來的，只知道npm start/npm run dev項(xiàng)目就跑起來了，究竟我在輸入這行命令之后項(xiàng)目是怎么運(yùn)行的，分別走了哪幾步，怎么樣才走到生產(chǎn)環(huán)境，什么情況下又運(yùn)行了開發(fā)環(huán)境，然后還有一個(gè)test測(cè)試環(huán)境。我寫下這篇文章的時(shí)候?qū)@一部分了解了一些，但自我感覺并不是非常透徹，所以當(dāng)作一個(gè)未完成的任務(wù)，文章還會(huì)持續(xù)的更新
在寫這篇文章的之前我也查閱了好多大神的博客，內(nèi)容有引用，文章末尾會(huì)表明所引文章的出處
首先先說一下創(chuàng)建vue項(xiàng)目的流程(以vue-cli2來舉例)：
1、npm install vue-cli -g //-g是全局安裝，只要不是重裝系統(tǒng)，只安裝一次就可以
2、npm init webpack 項(xiàng)目名稱 //這一步依靠webpack來創(chuàng)建一個(gè)項(xiàng)目
3、npm install //安裝相關(guān)依賴
4、npm run dev/npm start //運(yùn)行項(xiàng)目
對(duì)于第四點(diǎn)，為什么有兩個(gè)選擇，這要看你創(chuàng)建好項(xiàng)目之后的package.json這個(gè)文件，文件中有scripts對(duì)象，對(duì)象中可以看到有start屬性和dev屬性。當(dāng)執(zhí)行了npm start命令，也就等同于執(zhí)行了npm run dev這個(gè)命令，而這個(gè)命令，就是執(zhí)行了開發(fā)環(huán)境
在dev這個(gè)對(duì)象的值中可以看到，命令最終走到了build文件夾下的webpack.dev.conf.js這個(gè)文件里，找到這個(gè)文件
打開這個(gè)文件可以看到有devServe的對(duì)象，對(duì)象屬性中有主機(jī)名，端口號(hào)，還有publicPath和配置的反向代理。這些屬性的屬性值都是以config.dev開頭的。而config又是引入的config文件夾下的index.js
點(diǎn)開index.js文件
在文件中找到dev的配置項(xiàng)
在配置項(xiàng)中可以看到有下面幾項(xiàng)
assetsSubDirectory //除了index.html之外的靜態(tài)資源要存放的路徑
assetsPublicPath //代表打包后，index.html里引用資源的相對(duì)地址
proxyTable //在這個(gè)里面可以配置反向代理
host //主機(jī)名
port //端口號(hào)
autoOpenBrowser //是否自動(dòng)打開瀏覽器
順便說一下這個(gè)文件中下面的build配置項(xiàng)
index：path.resolve(__dirname, "../dist/index.html") //模板
assetsRoot： path.resolve(__dirname, "../dist") //打包后文件要存放的路徑，一般為dist
assetsSubDirectory："static" //把所有的靜態(tài)文件打包到dist文件下的static文件內(nèi)
assetsPublicPath："/" //代表生成的index.html文件，里面引入資源時(shí)，路徑前面要加上 / （本人感覺還是挺重要的，要記?。?/p>
再插一句，我現(xiàn)在是用的vue-cli2搭建的項(xiàng)目，如果是vue-cli3搭建的話assetsPublicPath的配置內(nèi)容就換位置咯，屬性名都換了=>vue.config.js中的publicPath的屬性下配置
這樣開發(fā)環(huán)境的相關(guān)流程就走完了，接下來是三大環(huán)境中剩下的生產(chǎn)環(huán)境
首先，生產(chǎn)環(huán)境是怎么來的，也就是說，我執(zhí)行怎樣的語句或者命令，項(xiàng)目就認(rèn)為我是一個(gè)生產(chǎn)環(huán)境，沒錯(cuò)，這個(gè)命令就是 npm run build，執(zhí)行這個(gè)語句的動(dòng)作就是打包項(xiàng)目
首先看圖說話
執(zhí)行命令之后就走build文件夾下的build.js文件，打開build.js，看到下圖
說明一下：
build文件夾下的webpack.prod.conf.js文件里面是對(duì)生產(chǎn)環(huán)境做的一些環(huán)境配置
另外看一下config文件夾下的index.js文件內(nèi)的build配置項(xiàng)這部分的配置項(xiàng)內(nèi)容上面已經(jīng)提到，剩下的一部分配置項(xiàng)都是起到什么作用，等我慢慢更新
如果文章中有不正確的地方還希望各位大佬不吝執(zhí)教，在此謝過
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110255.html
摘要：在回調(diào)隊(duì)列中，函數(shù)等待調(diào)用棧為空，因?yàn)槊總€(gè)語句都執(zhí)行一次。最后一個(gè)運(yùn)行，并且從調(diào)用棧中彈出。它將回調(diào)以先進(jìn)先出順序移動(dòng)到調(diào)用棧并執(zhí)行。 翻譯：瘋狂的技術(shù)宅原文： https://medium.freecodecamp.o... 本文首發(fā)微信公眾號(hào)：前端先鋒歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 Node.js 是一個(gè) JavaScript 運(yùn)行時(shí)環(huán)境。聽起來還不錯(cuò)，不過這究竟...
摘要：究竟是什么是一個(gè)運(yùn)行時(shí)環(huán)境。對(duì)此請(qǐng)求的響應(yīng)需要時(shí)間，但兩個(gè)用戶數(shù)據(jù)請(qǐng)求可以獨(dú)立并同時(shí)執(zhí)行。所以這會(huì)使不太適合多線程任務(wù)。這種非阻塞消除了多線程的需要，因?yàn)榉?wù)器可以同時(shí)處理多個(gè)請(qǐng)求。該事件將等待毫秒，然后回調(diào)函數(shù)。系統(tǒng)事件來自庫的核心。 Node.js究竟是什么？ Node.js是一個(gè)JavaScript運(yùn)行時(shí)環(huán)境。聽起來不錯(cuò)，但這是什么意思？這是如何運(yùn)作的？ Node運(yùn)行時(shí)環(huán)境包含執(zhí)...
摘要：究竟是什么是一個(gè)運(yùn)行時(shí)環(huán)境。對(duì)此請(qǐng)求的響應(yīng)需要時(shí)間，但兩個(gè)用戶數(shù)據(jù)請(qǐng)求可以獨(dú)立并同時(shí)執(zhí)行。所以這會(huì)使不太適合多線程任務(wù)。這種非阻塞消除了多線程的需要，因?yàn)榉?wù)器可以同時(shí)處理多個(gè)請(qǐng)求。該事件將等待毫秒，然后回調(diào)函數(shù)。系統(tǒng)事件來自庫的核心。 Node.js究竟是什么？ Node.js是一個(gè)JavaScript運(yùn)行時(shí)環(huán)境。聽起來不錯(cuò)，但這是什么意思？這是如何運(yùn)作的？ Node運(yùn)行時(shí)環(huán)境包含執(zhí)...
閱讀 2892·2021-11-19 11:35
閱讀 2612·2021-11-02 14:40
閱讀 1436·2021-09-04 16:48
閱讀 3051·2019-08-30 15:55
閱讀 1800·2019-08-30 13:11
閱讀 1982·2019-08-29 11:12
閱讀 1119·2019-08-27 10:52
閱讀 3194·2019-08-26 18:36
