Nginx 部署Vue前端專案

2021-08-21 04:12:20 字數 672 閱讀 6961

➜ npm run build
構建成功後基本會在配置的dist檔案下生成靜態html檔案。

把生成目錄dist裡的檔案打包上傳至伺服器(192.168.234.97)

➜ scp ./dist.zip [email protected]


:/opt/www/vue-base
輸入伺服器登入密碼。

上傳到伺服器靜態位址

➜ /opt/www/vue-base
➜ unzip dist.zip
nginx 安裝目錄

➜ cd /opt/software/nginx
進入nginx安裝目錄，修改 nginx 的配置檔案:

➜ vim conf/nginx.conf
修改如下：root 對映到靜態**資料夾：

location /
進入nginx安裝目錄，執行命令：

➜ ./nginx
重啟nginx

➜ ./nginx -s reload

nginx中部署vue前端專案

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

Nginx部署Vue專案

npm run build生成乙個dist資料夾。將dist目錄整個複製到nginx根目錄的html資料夾下。編輯conf目錄下的nginx.conf檔案 server 因為路由的路徑資源並不是乙個真實的路徑，所以無法找到具體的檔案 因此需要rewrite到index.html，然後交給路由再處理資...

nginx部署vue專案

nginx是乙個高效能的http和反向 伺服器。因此常用來做靜態資源伺服器和後端的反向 伺服器。本文主要記錄使用nginx去部署使用vue搭建的前端專案，專案基於vue官方的腳手架vue cli構建。打包vue專案 通過npm run build命令打包好的靜態資源將輸出到dist目錄中。1.win...