下載Nginx

以windows版為例，下載niginx壓縮包并解壓到任意目錄，雙擊nginx.exe，在瀏覽器中訪問http://localhost，如果出現(xiàn)Welcome to nginx!頁面則說明成功。

nginx常用命令如下：

nginx -h? ? ? ? # 打開幫助

nginx -t? ? ? ? # 檢查配置文件是否正確

# 以下命令均要先啟動nginx才能執(zhí)行

nginx -s stop? ?# 停止

nginx -s quit? ?# 退出

nginx -s reopen # 重新啟動（注意不會重新讀取配置文件）

nginx -s reload # 重新讀取配置文件

部署項目到Nginx根目錄

對于vue-cli創(chuàng)建的項目，修改vue.config.js文件（位于項目根目錄下，沒有的話自行創(chuàng)建）

module.exports = {

? // 開發(fā)環(huán)境中使用的端口

? devServer: {

? ? port: 8001

? },

? // 取消生成map文件（map文件可以準確的輸出是哪一行哪一列有錯）

? productionSourceMap: false,

? // 開發(fā)環(huán)境和部署環(huán)境的路徑

? publicPath: process.env.NODE_ENV === 'production'

? ? ? '/'

? ? : '/my/',

? configureWebpack: (config) => {

? ? // 增加 iview-loader

? ? config.module.rules[0].use.push({

? ? ? loader: 'iview-loader',

? ? ? options: {

? ? ? ? prefix: false

? ? ? }

? ? })

? ? // 在命令行使用 vue inspect > o.js 可以檢查修改后的webpack配置文件

? }

}

在vue項目根目錄中使用命令npm run build創(chuàng)建輸出文件，將dist文件夾下的所有內(nèi)容復(fù)制到nginx目錄下的webapp/內(nèi)（沒有的話自行創(chuàng)建）。

修改nginx目錄中的conf/nginx.conf文件，在 http -> server 節(jié)點中，修改location節(jié)的內(nèi)容：

location / {

? ? root? ?webapp;

? ? index? index.html index.htm;

}

在nginx根目錄使用命令nginx -s reload即可在瀏覽器中通過http://localhost訪問項目。

多個項目部署到Nginx

有時一個Nginx中放了好幾個子項目，需要將不同的項目通過不同的路徑來訪問。

對于項目1而言，修改vue.config.js文件的publicPath：

publicPath: '/vue1/'

對于項目2而言，修改vue.config.js文件的publicPath：

publicPath: '/vue2/'

分別在vue項目根目錄中使用命令npm run build創(chuàng)建輸出文件，將dist文件夾下的所有內(nèi)容復(fù)制到nginx目錄下的webapp/vue1和webapp/vue2內(nèi)（沒有的話自行創(chuàng)建）。

修改nginx目錄中的conf/nginx.conf文件，在 http -> server 節(jié)點中，修改location節(jié)的內(nèi)容：

location /vue1 {

? ? root? ?webapp;

? ? index? index.html index.htm;

}

location /vue2 {

? ? root? ?webapp;

? ? index? index.html index.htm;

}

在nginx根目錄使用命令nginx -s reload即可在瀏覽器中通過http://localhost/vue1、http://localhost/vue2訪問項目1、項目2。

端口代理

當前后端項目分別部署在同一臺機器上時，由于無法使用相同的端口，故后端一般會將端口號設(shè)置成不同的值（例如8080），但是當前端向后端請求資源時還要加上端口號，未免顯得麻煩，故利用可以nginx將前端的指定路徑代理到后端的8080端口上。

在conf/nginx.conf文件中增加location：

location /api {

? ? proxy_pass http://localhost:8080/api;

}

這樣，當前端訪問/api路徑時，實際上訪問的是http://localhost:8080/api路徑。

文：云和數(shù)據(jù)H5高級開發(fā)工程師

云和數(shù)據(jù)作為一個深耕IT職業(yè)教育多年的教育者，目前的課程涵蓋云計算、大數(shù)據(jù)、人工智能、虛擬現(xiàn)實、軟件工程、用戶體驗設(shè)計、網(wǎng)絡(luò)安全、電子商務(wù)等八大方向，結(jié)合企業(yè)實際用人需求，只為培養(yǎng)更多高端IT技術(shù)人才。

聲明：除云和數(shù)據(jù)原創(chuàng)文章外，本公眾號分享和轉(zhuǎn)載的文章皆為促進IT技術(shù)的傳播，僅做交流學(xué)習使用，非商業(yè)用途。如有文章或圖片的原作者有異議或涉及版權(quán)問題，請立即聯(lián)系我們，我們將在第一時間進行改正或刪除，確保您的權(quán)益，謝謝支持！