vue前端專案與nginx在伺服器配置

2021-08-21 03:46:11 字數 689 閱讀 1809

到了將前端的成果配置到伺服器上跑跑的時候了,由於後台的同學任務比較重,將前端部署到伺服器貌似也是前端同學的事情,於是我就自己大膽嘗試了一波(反正伺服器不是我的,隊友也說了一般搞不蹦的)。我們組打算現在ubuntu伺服器上安裝nginx,用它來啟動前端專案。所以第一步就是在ubuntu伺服器上安裝nginx。

由於沒有什麼安裝經驗,我查閱了不少部落格,其中有一篇部落格(在這裡)將每個安裝步驟都描述得很詳細,看完就基本會安裝和使用nginx了(**功能除外)。其中可能會遇到執行sudo ./nginx -s reload之類的命令報錯找不到檔案的問題,這個谷歌一下,就知道解決方法了。

安裝好nginx之後,在自己的vue-cli專案生成靜態資源。首先要先修改vue的配置檔案,新增publicpath,這樣才能讓生成的dist資料夾中的**能夠正確訪問到資源。如下圖:

執行npm run build生成dist資料夾,然後把這個資料夾放伺服器上。修改nginx的配置檔案,給前端專案分配乙個埠。具體的配置檔案我參考了這篇部落格,以下是它的截圖,把listen後面換成要開放的埠,把root後面換成dist資料夾的路徑即可。

Nginx 部署Vue前端專案

npm run build構建成功後基本會在配置的dist檔案下生成靜態html檔案。把生成目錄dist裡的檔案打包上傳至伺服器 192.168.234.97 scp dist.zip root 192.168.234.97 opt www vue base輸入伺服器登入密碼。上傳到伺服器靜態位址 ...

nginx中部署vue前端專案

首先當然是阿里雲伺服器購買以及vue專案的編寫了,伺服器購買就不說了,vue專案打包npm run dev的時候要注意一下,主要是config index.js裡assetspublicpath要配置成 原來是 不然在上線後會什麼也沒有,還有就是如果使用了axios跨域 跨埠 的話,並且是使用pro...

Nginx配置多個vue前端專案 後端專案

我在之前已經使用docker nginx部署乙個vue專案了,大概是這樣的 conf.d default.conf server error page 404 404.html redirect server error pages to the static page 50x.html error...