項目在啟動時究竟是怎么運行的（項目運行的步驟）

Godtoy 發(fā)布于2019-08-26 18:36 / 3167人閱讀

摘要：自己在前端的開發(fā)中主要使用的框架，今天的這篇文章比較基礎，我之前在剛剛接觸項目的時候并沒有思考過關于項目是究竟怎么運行起來的，只知道項目就跑起來了，究竟我在輸入這行命令之后項目是怎么運行的，分別走了哪幾步，怎么樣才走到生產(chǎn)環(huán)境，什么情況下又

自己在前端的開發(fā)中主要使用vue.js的框架，今天的這篇文章比較基礎，我之前在剛剛接觸vue項目的時候并沒有思考過關于項目是究竟怎么運行起來的，只知道npm start/npm run dev項目就跑起來了，究竟我在輸入這行命令之后項目是怎么運行的，分別走了哪幾步，怎么樣才走到生產(chǎn)環(huán)境，什么情況下又運行了開發(fā)環(huán)境，然后還有一個test測試環(huán)境。我寫下這篇文章的時候對這一部分了解了一些，但自我感覺并不是非常透徹，所以當作一個未完成的任務，文章還會持續(xù)的更新
在寫這篇文章的之前我也查閱了好多大神的博客，內(nèi)容有引用，文章末尾會表明所引文章的出處

首先先說一下創(chuàng)建vue項目的流程(以vue-cli2來舉例)：
1、npm install vue-cli -g //-g是全局安裝，只要不是重裝系統(tǒng)，只安裝一次就可以
2、npm init webpack 項目名稱 //這一步依靠webpack來創(chuàng)建一個項目
3、npm install //安裝相關依賴
4、npm run dev/npm start //運行項目
對于第四點，為什么有兩個選擇，這要看你創(chuàng)建好項目之后的package.json這個文件，文件中有scripts對象，對象中可以看到有start屬性和dev屬性。當執(zhí)行了npm start命令，也就等同于執(zhí)行了npm run dev這個命令，而這個命令，就是執(zhí)行了開發(fā)環(huán)境

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

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

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

順便說一下這個文件中下面的build配置項
index：path.resolve(__dirname, "../dist/index.html") //模板
assetsRoot： path.resolve(__dirname, "../dist") //打包后文件要存放的路徑，一般為dist
assetsSubDirectory："static" //把所有的靜態(tài)文件打包到dist文件下的static文件內(nèi)
assetsPublicPath："/" //代表生成的index.html文件，里面引入資源時，路徑前面要加上 / （本人感覺還是挺重要的，要記住）

再插一句，我現(xiàn)在是用的vue-cli2搭建的項目，如果是vue-cli3搭建的話assetsPublicPath的配置內(nèi)容就換位置咯，屬性名都換了=>vue.config.js中的publicPath的屬性下配置

這樣開發(fā)環(huán)境的相關流程就走完了，接下來是三大環(huán)境中剩下的生產(chǎn)環(huán)境
首先，生產(chǎn)環(huán)境是怎么來的，也就是說，我執(zhí)行怎樣的語句或者命令，項目就認為我是一個生產(chǎn)環(huán)境，沒錯，這個命令就是 npm run build，執(zhí)行這個語句的動作就是打包項目
首先看圖說話

執(zhí)行命令之后就走build文件夾下的build.js文件，打開build.js，看到下圖

說明一下：
build文件夾下的webpack.prod.conf.js文件里面是對生產(chǎn)環(huán)境做的一些環(huán)境配置
另外看一下config文件夾下的index.js文件內(nèi)的build配置項這部分的配置項內(nèi)容上面已經(jīng)提到，剩下的一部分配置項都是起到什么作用，等我慢慢更新

如果文章中有不正確的地方還希望各位大佬不吝執(zhí)教，在此謝過

云服務器 GPU云服務器外網(wǎng)運行項目阿里云服務器運行php項目運行在相應地域的ECS 可以在云服務器運行的腳本

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110255.html

Node.js 究竟是什么？

摘要：在回調(diào)隊列中，函數(shù)等待調(diào)用棧為空，因為每個語句都執(zhí)行一次。最后一個運行，并且從調(diào)用棧中彈出。它將回調(diào)以先進先出順序移動到調(diào)用棧并執(zhí)行。翻譯：瘋狂的技術宅原文： https://medium.freecodecamp.o... 本文首發(fā)微信公眾號：前端先鋒歡迎關注，每天都給你推送新鮮的前端技術文章 Node.js 是一個 JavaScript 運行時環(huán)境。聽起來還不錯，不過這究竟...

yeyan1996 2019-08-26 13:55 評論0 收藏0
Node.js究竟是什么？

摘要：究竟是什么是一個運行時環(huán)境。對此請求的響應需要時間，但兩個用戶數(shù)據(jù)請求可以獨立并同時執(zhí)行。所以這會使不太適合多線程任務。這種非阻塞消除了多線程的需要，因為服務器可以同時處理多個請求。該事件將等待毫秒，然后回調(diào)函數(shù)。系統(tǒng)事件來自庫的核心。 Node.js究竟是什么？ Node.js是一個JavaScript運行時環(huán)境。聽起來不錯，但這是什么意思？這是如何運作的？ Node運行時環(huán)境包含執(zhí)...

miracledan 2019-08-22 17:06 評論0 收藏0
Node.js究竟是什么？

摘要：究竟是什么是一個運行時環(huán)境。對此請求的響應需要時間，但兩個用戶數(shù)據(jù)請求可以獨立并同時執(zhí)行。所以這會使不太適合多線程任務。這種非阻塞消除了多線程的需要，因為服務器可以同時處理多個請求。該事件將等待毫秒，然后回調(diào)函數(shù)。系統(tǒng)事件來自庫的核心。 Node.js究竟是什么？ Node.js是一個JavaScript運行時環(huán)境。聽起來不錯，但這是什么意思？這是如何運作的？ Node運行時環(huán)境包含執(zhí)...

dingding199389 2019-08-29 15:20 評論0 收藏0