這幾天為了部署前端專案的事情,頭都搞大了。又沒有運維的支援,全靠我這個前端開發弄,真是踩了部署的各種坑了。
這裡說一下 nginx 次級網域名稱部署基於 dvajs 開發 react 框架的靜態專案的注意要點。
基於 dvajs 框架的開發環境搭建,這裡我就不細說了。
編譯打包
首先我們來看看專案編譯後 index.html 中指令碼的引入
複製**
不難發現引入的指令碼路徑是絕對的,這就有點可怕了呀!直接可能導致線上部署出問題呀!
nginx 配置
server
}複製**
這裡伺服器的配置直接導致我們訪問時的位址是 www.abc.com/merchantstatic/index.html
問題描述
根據上面專案**編譯打包後生成的 index.html 檔案**和 nginx 伺服器的配置,現在不難發現問題所在 - index.html 裡面引入的指令碼不能正常引入了。因為對應的指令碼引入位址變成了 www.abc.com/index.css 和 www.abc.com/index.js,而正確的位址應該為 www.abc.com/merchantstatic/index.css 和 www.abc.com/merchantstatic/index.js,是不是?是不是?
解決問題
既然問題已經出現,而且我們已經知道問題所在,解決問題的方案那就好說了。修改 .webpackrc 裡面的 publicpath 配置屬性為 /merchantstatic/ 字首目錄。
修改完後重新 build 發現 index.html 裡面
複製**
是我們期望的 url 。重新部署**訪問 www.abc.com/merchantstatic/index.html 沒毛病了,頁面很絲滑!! CentOS下Nginx部署React靜態應用
檢視centos版本 cat etc redhat release 安裝nginx yum install nginx 檢視nginx版本 nginx v 啟動nginx systemctl start nginx nginx預設發布目錄 cd usr share nginx 由於是單頁應用虛擬路由...
nginx同網域名稱下部署多個vue專案
一.需求 想要在同乙個網域名稱下部署多個前端專案,通過不同url來區分呼叫相應前端專案。比如 部署專案a,專案b。想要效果如下。瀏覽器輸入 http localhost 8082 a 展示專案a。瀏覽器輸入 http localhost 8082 b 展示專案b。三.nginx常用命令 進入ngin...
Nginx 服務部署 基於網域名稱的虛擬主機配置
安裝centos 配置hosts 靜態ip 設定必要的安全引數等 略 root vnx cat etc redhat release centos release 6.9 final root vnx uname r 2.6.32 696 el6.x86 64 root vnx uname m x8...