需求

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

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

過(guò)程

1、首先，肯定需要將vue的項(xiàng)目進(jìn)行打包

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

這時(shí)候你可以先試試打開(kāi)dist文件夾下的index.html能不能顯示頁(yè)面。如果可以，直接跳到第二步。如果和我一樣打開(kāi)后沒(méi)頁(yè)面，是空白頁(yè)的?？梢栽囋囅旅娴牟僮鳌?/p>

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

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

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

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

因?yàn)榉?wù)器就在身邊，所以沒(méi)那么麻煩，直接用移動(dòng)硬盤(pán)拷進(jìn)去了。 如果需要遠(yuǎn)程上傳的話，可以參考用Xftp相關(guān)的帖子。

3、使用Nginx配置 

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

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

查看nginx是否安裝成功

nginx -v

啟動(dòng)nginx

service nginx start

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

然后修改nginx

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

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

ps：修改配置文件時(shí)，按一下 i 進(jìn)入編輯模式，編輯完了 按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;
                }
        }

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

可以輸入 sudo nginx -t  查看是否修改的正確，輸出如下 （其實(shí)感覺(jué)只能檢查出最基本的錯(cuò)誤，有一些小問(wèn)題也沒(méi)法檢查出來(lái)）

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)解決了，然后打開(kāi)瀏覽器，訪問(wèn) 主機(jī)號(hào):端口號(hào) 然后報(bào)錯(cuò) 404

下面就記錄一下，跟著上面步驟踩坑的過(guò)程。如果有類(lèi)似的，可以參考。

踩坑

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

首先，我們還是要回到nginx.conf配置文件去檢查有沒(méi)有寫(xiě)錯(cuò)ip地址和端口號(hào)

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

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

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

首先，我們遇到500，先去看報(bào)的什么錯(cuò)，再具體問(wèn)題具體分析。

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

cd /var/log/nginx
cat error.log

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

如果你也是這個(gè)問(wèn)題，一定去檢查你的路徑，也就是上文中我們?cè)趎ginx.conf里面配置的 server中的 root和location / {} 

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

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

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

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

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

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

nginx反向代理

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

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;
                }
        }

后臺(tái)接口的主機(jī)號(hào)和服務(wù)器的主機(jī)號(hào)是一直的，都是121.xxx.xxx.xx， server_name添加了主機(jī)號(hào)，因?yàn)樗薪涌诙加泄餐熬Y api，所以反向代理，接口是8083

至此，部署全部完畢

總結(jié)

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

最新評(píng)論