vue項(xiàng)目打包并部署到Linux服務(wù)器的詳細(xì)過程
一、打包vue前端項(xiàng)目
在vs code中打開vue前端項(xiàng)目文件夾，在終端中輸入npm run build，打包完成后，在前端項(xiàng)目文件夾中會(huì)生成一個(gè)名為dist的文件夾，如下圖所示：
dist文件夾打開如下所示：
二、安裝nginx
1.下載及安裝
打開服務(wù)器終端，在終端中輸入以下命令，下載nginx安裝包。
wget http://nginx.org/download/nginx-1.20.2.tar.gz
其中nginx版本可以自己選擇，具體版本可查看此鏈接：http://nginx.org/
將下載的壓縮包解壓，輸入指令：
tar -zvxf nginx-1.20.2.tar.gz
cd nginx-1.20.2
安裝nginx
./configure --with-http_ssl_module --with-http_gzip_static_module
make
make install
2.啟動(dòng)程序
進(jìn)入目錄，啟動(dòng)nginx
cd /usr/local/nginx/sbin/
./nginx
3.其他命令
查看nginx運(yùn)行狀態(tài)：
ps aux | grep nginx
停止運(yùn)行：
./nginx -s stop
查看版本：
./nginx -v
檢查配置文件：
./nginx -t
三、利用WinSCP傳輸文件
采用WinSCP將打包好的dist文件傳輸至服務(wù)器上，具體安裝步驟可自行在網(wǎng)上查找。
需要填寫以下信息進(jìn)行服務(wù)器登錄，主機(jī)名為服務(wù)器IP，用戶名和密碼都是服務(wù)器登錄賬號(hào)密碼。
打開界面如下，左邊為本地電腦文件，右邊為服務(wù)器文件。
將本地電腦中的dist文件直接拖拽或復(fù)制到右邊想放置的文件夾位置即可。
四、配置nginx
在將dist文件傳輸至服務(wù)器以后，需要對nginx進(jìn)行配置。
在服務(wù)器中找到/usr/local/nginx/conf/nginx.conf文件，打開nginx.conf文件修改以下內(nèi)容：
1.修改服務(wù)器端口
listen默認(rèn)端口為8080，因?yàn)閭€(gè)人需求所以改為了8081，server_name填寫localhost即可。
server {
listen 8081;
server_name localhost;
2.修改dist存放路徑
root改為dist文件存放的路徑，添加一行try_files $uri $uri/ @router;，防止刷新頁面出現(xiàn)404。
location / {
root /home/xj/dist;
index index.html index.htm;
try_files $uri $uri/ @router;
}
3.完整配置文件
nginx.conf完整內(nèi)容如下：
#user root;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 8081;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /home/xj/dist;
index index.html index.htm;
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
五、進(jìn)入界面和項(xiàng)目更新
1.進(jìn)入界面
配置完成后需要重新啟動(dòng)以下nginx，可以用如下指令：
nginx -s stop cd /usr/local/nginx/sbin/ ./nginx #或者 nginx -s reload
重啟完以后在瀏覽器中輸入服務(wù)器IP:端口即可訪問界面。
2.項(xiàng)目更新
如果后續(xù)前端項(xiàng)目文件需要更新，則再次生成dist文件，將新的dist文件替換至服務(wù)器文件夾相同位置中，無需重啟nginx。
若發(fā)現(xiàn)更新后前端界面無變化，可重啟nginx后再次進(jìn)入界面查看。
總結(jié)
本文對vue項(xiàng)目的部署簡單進(jìn)行了介紹，但是仍然存在部分圖表模塊顯示不全的問題。
到此這篇關(guān)于vue項(xiàng)目打包并部署到Linux服務(wù)器的文章就介紹到這了,更多相關(guān)vue項(xiàng)目打包并部署到Linux內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue學(xué)習(xí)之路之登錄注冊實(shí)例代碼
本篇文章主要介紹了Vue學(xué)習(xí)之路之登錄注冊實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
本篇文章主要介紹了Vue filter介紹及其使用詳解，VueJs 提供了強(qiáng)大的過濾器API，能夠?qū)?shù)據(jù)進(jìn)行各種過濾處理。一起跟隨小編過來看看吧2017-10-10
vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁面及刷新方法詳解
這篇文章主要給大家介紹了關(guān)于vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁面及刷新方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue2.0實(shí)現(xiàn)倒計(jì)時(shí)的插件(時(shí)間戳 刷新 跳轉(zhuǎn) 都不影響)
我發(fā)現(xiàn)好多倒計(jì)時(shí)的插件，刷新都會(huì)變成從頭再來，于是自己用vue2.0寫了一個(gè)，感覺還不錯(cuò)，特此分享到腳本之家平臺(tái)供大家參考下2017-03-03
Nuxt3項(xiàng)目搭建過程(Nuxt3+element-plus+scss詳細(xì)步驟)
這篇文章主要介紹了Nuxt3項(xiàng)目搭建（Nuxt3+element-plus+scss詳細(xì)步驟）,本次記錄一次使用Nuxt3搭建前端項(xiàng)目的過程，內(nèi)容包含Nuxt3的安裝，基于Vite腳手架（默認(rèn)）構(gòu)建的vue3項(xiàng)目，element-plus的安裝配置，scss的安裝，目錄結(jié)構(gòu)的創(chuàng)建和解釋，需要的朋友可以參考下2022-12-12
使用el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動(dòng)視圖問題
這篇文章主要介紹了使用el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動(dòng)視圖問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法
這篇文章主要介紹了vue使用el-upload上傳文件及Feign服務(wù)間傳遞文件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
Vue中Element的table多選表格如何實(shí)現(xiàn)單選
這篇文章主要介紹了Vue中Element的table多選表格如何實(shí)現(xiàn)單選，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
淺談vue項(xiàng)目可以從哪些方面進(jìn)行優(yōu)化
本篇文章主要介紹了淺談vue項(xiàng)目可以從哪些方面進(jìn)行優(yōu)化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
在一般業(yè)務(wù)中監(jiān)聽的最多的就是 Click 事件，但是在一些業(yè)務(wù)比如 Alert 和 Pop 效果時(shí)，需要監(jiān)聽在元素外部的點(diǎn)擊來關(guān)閉彈窗。2020-11-11