下載Nginx
以windows版為例,下載niginx壓縮包并解壓到任意目錄,雙擊nginx.exe,在瀏覽器中訪問(wèn)http://localhost,如果出現(xiàn)Welcome to nginx!頁(yè)面則說(shuō)明成功。
nginx常用命令如下:
nginx -h? ? ? ? # 打開(kāi)幫助
nginx -t? ? ? ? # 檢查配置文件是否正確
# 以下命令均要先啟動(dòng)nginx才能執(zhí)行
nginx -s stop? ?# 停止
nginx -s quit? ?# 退出
nginx -s reopen # 重新啟動(dòng)(注意不會(huì)重新讀取配置文件)
nginx -s reload # 重新讀取配置文件
部署項(xiàng)目到Nginx根目錄
對(duì)于vue-cli創(chuàng)建的項(xiàng)目,修改vue.config.js文件(位于項(xiàng)目根目錄下,沒(méi)有的話自行創(chuàng)建)
module.exports = {
? // 開(kāi)發(fā)環(huán)境中使用的端口
? devServer: {
? ? port: 8001
? },
? // 取消生成map文件(map文件可以準(zhǔn)確的輸出是哪一行哪一列有錯(cuò))
? productionSourceMap: false,
? // 開(kāi)發(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項(xiàng)目根目錄中使用命令npm run build創(chuàng)建輸出文件,將dist文件夾下的所有內(nèi)容復(fù)制到nginx目錄下的webapp/內(nèi)(沒(méi)有的話自行創(chuàng)建)。
修改nginx目錄中的conf/nginx.conf文件,在 http -> server 節(jié)點(diǎn)中,修改location節(jié)的內(nèi)容:
location / {
? ? root? ?webapp;
? ? index? index.html index.htm;
}
在nginx根目錄使用命令nginx -s reload即可在瀏覽器中通過(guò)http://localhost訪問(wèn)項(xiàng)目。
多個(gè)項(xiàng)目部署到Nginx
有時(shí)一個(gè)Nginx中放了好幾個(gè)子項(xiàng)目,需要將不同的項(xiàng)目通過(guò)不同的路徑來(lái)訪問(wèn)。
對(duì)于項(xiàng)目1而言,修改vue.config.js文件的publicPath:
publicPath: '/vue1/'
對(duì)于項(xiàng)目2而言,修改vue.config.js文件的publicPath:
publicPath: '/vue2/'
分別在vue項(xiàng)目根目錄中使用命令npm run build創(chuàng)建輸出文件,將dist文件夾下的所有內(nèi)容復(fù)制到nginx目錄下的webapp/vue1和webapp/vue2內(nèi)(沒(méi)有的話自行創(chuàng)建)。
修改nginx目錄中的conf/nginx.conf文件,在 http -> server 節(jié)點(diǎn)中,修改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即可在瀏覽器中通過(guò)http://localhost/vue1、http://localhost/vue2訪問(wèn)項(xiàng)目1、項(xiàng)目2。
端口代理
當(dāng)前后端項(xiàng)目分別部署在同一臺(tái)機(jī)器上時(shí),由于無(wú)法使用相同的端口,故后端一般會(huì)將端口號(hào)設(shè)置成不同的值(例如8080),但是當(dāng)前端向后端請(qǐng)求資源時(shí)還要加上端口號(hào),未免顯得麻煩,故利用可以nginx將前端的指定路徑代理到后端的8080端口上。
在conf/nginx.conf文件中增加location:
location /api {
? ? proxy_pass http://localhost:8080/api;
}
這樣,當(dāng)前端訪問(wèn)/api路徑時(shí),實(shí)際上訪問(wèn)的是http://localhost:8080/api路徑。
文:云和數(shù)據(jù)H5高級(jí)開(kāi)發(fā)工程師
云和數(shù)據(jù)作為一個(gè)深耕IT職業(yè)教育多年的教育者,目前的課程涵蓋云計(jì)算、大數(shù)據(jù)、人工智能、虛擬現(xiàn)實(shí)、軟件工程、用戶體驗(yàn)設(shè)計(jì)、網(wǎng)絡(luò)安全、電子商務(wù)等八大方向,結(jié)合企業(yè)實(shí)際用人需求,只為培養(yǎng)更多高端IT技術(shù)人才。
聲明:除云和數(shù)據(jù)原創(chuàng)文章外,本公眾號(hào)分享和轉(zhuǎn)載的文章皆為促進(jìn)IT技術(shù)的傳播,僅做交流學(xué)習(xí)使用,非商業(yè)用途。如有文章或圖片的原作者有異議或涉及版權(quán)問(wèn)題,請(qǐng)立即聯(lián)系我們,我們將在第一時(shí)間進(jìn)行改正或刪除,確保您的權(quán)益,謝謝支持!
Copyright ? 2013-2021 河南云和數(shù)據(jù)信息技術(shù)有限公司 豫ICP備14003305號(hào) ISP經(jīng)營(yíng)許可證:豫B-20160281