需求

前后端完成項目后，需要部署到本地的服務(wù)器上。 

第一次部署，以下是從0開始慢慢學(xué)著弄的詳細(xì)過程

過程

1、首先，肯定需要將vue的項目進行打包

npm run build ，打包成功后，會出現(xiàn)dist文件夾

這時候你可以先試試打開dist文件夾下的index.html能不能顯示頁面。如果可以，直接跳到第二步。如果和我一樣打開后沒頁面，是空白頁的?？梢栽囋囅旅娴牟僮?。

在vue.config.js中，添加下面三行代碼

如果這時候還是不行的話，看看你路由是不是用的hash模式

這樣，應(yīng)該就可以打開了。

2、將dist文件上傳到服務(wù)器

因為服務(wù)器就在身邊，所以沒那么麻煩，直接用移動硬盤拷進去了。 如果需要遠(yuǎn)程上傳的話，可以參考用Xftp相關(guān)的帖子。

3、使用Nginx配置 

 首先要保證服務(wù)器里面安裝了nginx。我是Ubuntu下安裝，所以直接用apt-get

# 切換至root用戶
sudo su root
apt-get install nginx

查看nginx是否安裝成功

nginx -v

啟動nginx

service nginx start

瀏覽器輸入服務(wù)器ip地址就能看到了

然后修改nginx

終端下
cd /etc/nginx
sudo vim nginx.conf

 vim是進行文件修改，cat是進行查看  sudo是以管理員身份運行，防止權(quán)限問題

ps：修改配置文件時，按一下 i 進入編輯模式，編輯完了 按Esc，然后切換到英文輸入法，輸入  :wq 保存并退出

然后在http代碼塊內(nèi)輸入下面的代碼

server {
                listen 9000 default_server;
                listen [::]:80 default_server;
                root /home/www/dist;
                index index.html index.htm index.nginx-debian.html;
                server_name _;
                location / {
                        try_files $uri $uri/ /index.html;
                }
        }

其實主要就是添加server，我這里設(shè)置的端口號是9000，可以根據(jù)自己的需求設(shè)置，不用一樣，root放的就是我拷到服務(wù)器的dist文件存放的目錄  （就是這里，遇到了3個坑，后面會講的，這里還不是最終代碼，一步一步來）

可以輸入 sudo nginx -t  查看是否修改的正確，輸出如下 （其實感覺只能檢查出最基本的錯誤，有一些小問題也沒法檢查出來）

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

然后就重新加載nginx ，輸入：

sudo nginx -s reload

做完上面的步驟以后，我以為就已經(jīng)解決了，然后打開瀏覽器，訪問 主機號:端口號 然后報錯 404

下面就記錄一下，跟著上面步驟踩坑的過程。如果有類似的，可以參考。

踩坑

nginx服務(wù)器404錯誤的原因 404  Not Found

首先，我們還是要回到nginx.conf配置文件去檢查有沒有寫錯ip地址和端口號

然后 location / {} 里面 如果是try_files $uri $uri/ =404;的話，把=404改掉，改成你的html名，大部分應(yīng)該都是index.html

nginx服務(wù)器500錯誤的原因 500 Internal Server Error

解決完404以后，又訪問一下，結(jié)果是500的錯。這個坑折騰了我很久。

首先，我們遇到500，先去看報的什么錯，再具體問題具體分析。

error.log 和 access.log 都在/var/log/nginx 下 (如果沒有的話，可以看看你的nginx.conf，里面應(yīng)該會有寫)，所以輸入

cd /var/log/nginx
cat error.log

然后發(fā)現(xiàn)，報錯內(nèi)容是 rewrite or internal redirection cycle while internally redirecting to "/index.html"

如果你也是這個問題，一定去檢查你的路徑，也就是上文中我們在nginx.conf里面配置的 server中的 root和location / {} 

                root /home/www/dist;
                location / {
                        try_files $uri $uri/ /index.html;
                }

我上文中寫的是這樣子，其實我在home和www文件夾中還有一個文件夾被我漏掉了，一定要仔細(xì)檢查，要么就是路徑，要么就是斜杠，要么就是文件名或者后綴寫錯了。

所以，完整路徑應(yīng)該是 /home/abc/www/dist/index.html

所以，應(yīng)該要改成

                root /home/abc/www/dist;
                location / {
                        try_files $uri $uri/ /index.html;
                }

還看到一個報錯，是Permission denied，這個是權(quán)限問題，在nginx。conf的第一行應(yīng)該是又 user root這個權(quán)限的，如果被注釋了，打開就行。

nginx反向代理

又解決完500后，終于能訪問到了。但是還有一個坑，就是后臺接口用不了，數(shù)據(jù)一個都沒返回。第一次用，所以不知道還要配置反向代理

server {
                listen 9000 default_server;
                listen [::]:80 default_server;
                root /home/hhu4204/www/dist;
                index index.html index.htm index.nginx-debian.html;
                server_name 121.xxx.xxx.xx;
                location ^~/api/ {
                        proxy_pass http://121.xxx.xxx.xx:8083;
                }
                location / {
                        try_files $uri $uri/ /index.html;
                }
        }

后臺接口的主機號和服務(wù)器的主機號是一直的，都是121.xxx.xxx.xx， server_name添加了主機號，因為所有接口都有共同前綴 api，所以反向代理，接口是8083

至此，部署全部完畢

總結(jié)

到此這篇關(guān)于前端Vue項目部署到服務(wù)器的全過程以及踩坑記錄的文章就介紹到這了,更多相關(guān)前端Vue項目部署服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論