vue開發的項目,通過編譯會得到 dist文件夾,如何發布到nginx服務器上?
配置nginx服務器
在nginx服務文件中,打開 conf文件夾,如下
為了不改變nginx的默認配置(nginx.conf),復制一份,重名為 custom.conf,如下
修改 custom.conf 文件中的 root 參數為 custom,如下
......
server {
listen 80; // 監聽端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root custom; // 項目的靜態文件夾
index index.html index.htm;
}
......
根據上面修改的 root參數,在nginx服務器的根目錄下建立 custom文件夾,如下
通過命令行,按照自己建立的 custom.conf 配置,啟動nginx服務器,.\nginx -c .\conf\custom.conf
在 custom文件夾 中建立一個用來測試的 html文件(代碼如下),其中JS代碼用來測試nginx的反向代理,如下
<body>
<h1>Welcome to custom!</h1>
<p><em>Thank you for using nginx.</em></p>
<script>
fetch('/ajax/movieOnInfoList?token=&' +
'optimus_uuid=43388C403C4911EABDC9998C784A573A4F64A16AA5A34184BADE807E506D749E&' +
'optimus_risk_level=71&' +
'optimus_code=10').then(res => res.json()).then(res => {
console.log(res)
})
</script>
</body>
瀏覽器訪問 http://localhost:80,可以看到網頁正常訪問,但是並沒有使用nginx的反向代理獲取數據,如下
再次配置 custom.conf 文件,實現反向代理,如下
修改 custom.conf 文件中的 root 參數為 custom
``` javascript
......
server {
listen 80; # 監聽端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root custom; # 項目的靜態文件夾
index index.html index.htm;
}
# 從nginx走的請求,以 /ajax 開頭,代理到https//m.maoyan.com服務器上
location /ajax/ {
proxy_pass https://m.maoyan.com;
}
......
打開命令行,重啟 nginx,相關代碼如下,獲取https//m.maoyan.com的數據,如下
.\nginx -s stop 停止nginx服務
.\nginx -s restart 重啟nginx服務
.\nginx -s reload 重啟加載nginx配置文件(推薦)

發布vue項目
將已經打包的 vue 項目 dist 文件夾里面的內容存放到 custom 文件夾中,重啟 nginx 服務器/重新加載 nginx 配置,完成配置