vue項目打包并部署到Linux服務(wù)器的詳細過程
一、打包vue前端項目
在vs code中打開vue前端項目文件夾，在終端中輸入npm run build，打包完成后，在前端項目文件夾中會生成一個名為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.啟動程序
進入目錄，啟動nginx
cd /usr/local/nginx/sbin/
./nginx
3.其他命令
查看nginx運行狀態(tài)：
ps aux | grep nginx
停止運行：
./nginx -s stop
查看版本：
./nginx -v
檢查配置文件：
./nginx -t
三、利用WinSCP傳輸文件
采用WinSCP將打包好的dist文件傳輸至服務(wù)器上，具體安裝步驟可自行在網(wǎng)上查找。
需要填寫以下信息進行服務(wù)器登錄，主機名為服務(wù)器IP，用戶名和密碼都是服務(wù)器登錄賬號密碼。
打開界面如下，左邊為本地電腦文件，右邊為服務(wù)器文件。
將本地電腦中的dist文件直接拖拽或復制到右邊想放置的文件夾位置即可。
四、配置nginx
在將dist文件傳輸至服務(wù)器以后，需要對nginx進行配置。
在服務(wù)器中找到/usr/local/nginx/conf/nginx.conf文件，打開nginx.conf文件修改以下內(nèi)容：
1.修改服務(wù)器端口
listen默認端口為8080，因為個人需求所以改為了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;
# }
#}
}
五、進入界面和項目更新
1.進入界面
配置完成后需要重新啟動以下nginx，可以用如下指令：
nginx -s stop cd /usr/local/nginx/sbin/ ./nginx #或者 nginx -s reload
重啟完以后在瀏覽器中輸入服務(wù)器IP:端口即可訪問界面。
2.項目更新
如果后續(xù)前端項目文件需要更新，則再次生成dist文件，將新的dist文件替換至服務(wù)器文件夾相同位置中，無需重啟nginx。
若發(fā)現(xiàn)更新后前端界面無變化，可重啟nginx后再次進入界面查看。
總結(jié)
本文對vue項目的部署簡單進行了介紹，但是仍然存在部分圖表模塊顯示不全的問題。
到此這篇關(guān)于vue項目打包并部署到Linux服務(wù)器的文章就介紹到這了,更多相關(guān)vue項目打包并部署到Linux內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家深入的介紹了關(guān)于vue.js中v-if和v-show的相關(guān)資料，文中詳細介紹兩者的共同點和區(qū)別，通過圖文介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
這篇文章主要為大家介紹了springboot?vue接口測試前端模塊樹和接口列表，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
這篇文章主要介紹了vue中的install方法使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了Vue中webpack的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue3中調(diào)用api接口實現(xiàn)數(shù)據(jù)的渲染以及詳情方式
這篇文章主要介紹了vue3中調(diào)用api接口實現(xiàn)數(shù)據(jù)的渲染以及詳情方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
下面小編就為大家分享一篇vue element-ui table表格滾動加載方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了Vue+ElementUI之Tree的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
解決VUE中document.body.scrollTop為0的問題
今天小編就為大家分享一篇解決VUE中document.body.scrollTop為0的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)多欄布局拖拽，改變盒子的寬度，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03