專案環境：
0. Nginx使用
以windows版為例，下載niginx壓縮包并解壓到任意目錄，雙擊nginx.exe，在瀏覽器中訪問http://localhost，如果出現Welcome to nginx!頁面則說明成功，
nginx常用命令如下：
nginx -h # 打開幫助
nginx -t # 檢查組態檔是否正確
# 以下命令均要先啟動nginx才能執行
nginx -s stop # 停止
nginx -s quit # 退出
nginx -s reopen # 重新啟動（注意不會重新讀取組態檔）
nginx -s reload # 重新讀取組態檔
1. 部署專案到Nginx根目錄
對于vue-cli創建的專案，修改vue.config.js檔案（位于專案根目錄下，沒有的話自行創建）：
module.exports = {
// 開發環境中使用的埠
devServer: {
port: 8001
},
// 取消生成map檔案（map檔案可以準確的輸出是哪一行哪一列有錯）
productionSourceMap: false,
// 開發環境和部署環境的路徑
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創建輸出檔案，將dist檔案夾下的所有內容復制到nginx目錄下的webapp/內（沒有的話自行創建），
修改nginx目錄中的conf/nginx.conf檔案，在 http -> server 節點中，修改location節的內容：
location / {
root webapp;
index index.html index.htm;
}
在nginx根目錄使用命令nginx -s reload即可在瀏覽器中通過http://localhost訪問專案，
2. 多個專案部署到Nginx
有時一個Nginx中放了好幾個子專案，需要將不同的專案通過不同的路徑來訪問，
對于專案1而言，修改vue.config.js檔案的publicPath：
publicPath: '/vue1/'
對于專案2而言，修改vue.config.js檔案的publicPath：
publicPath: '/vue2/'
分別在vue專案根目錄中使用命令npm run build創建輸出檔案，將dist檔案夾下的所有內容復制到nginx目錄下的webapp/vue1和webapp/vue2內（沒有的話自行創建），
修改nginx目錄中的conf/nginx.conf檔案，在 http -> server 節點中，修改location節的內容：
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，
3. 埠代理
當前后端專案分別部署在同一臺機器上時，由于無法使用相同的埠，故后端一般會將埠號設定成不同的值（例如8080），但是當前端向后端請求資源時還要加上埠號，未免顯得麻煩，故利用可以nginx將前端的指定路徑代理到后端的8080埠上，
在conf/nginx.conf檔案中增加location：
location /api {
proxy_pass http://localhost:8080/api;
}
這樣，當前端訪問/api路徑時，實際上訪問的是http://localhost:8080/api路徑，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/177541.html
標籤：JavaScript
上一篇：js筆記之switch-case