ubuntu中利用nginx部署vue項(xiàng)目的完整步驟
1.安裝nginx
更新源列表
apt-get update
安裝nginx
apt-get install nginx
檢查nginx是否安裝,輸入如下命令后若出現(xiàn)版本號(hào)則安裝成功
nginx -v
啟動(dòng)nginx
server nginx restart
在瀏覽器輸入ip地址,若出現(xiàn)如下頁(yè)面則啟動(dòng)成功
2. 打包上傳vue項(xiàng)目到服務(wù)器
打包
我的項(xiàng)目使用的是vs code,在終端輸入如下命令進(jìn)行打包
npm run build
上傳
打包完成后會(huì)有dist文件,該文件為打包完成后的項(xiàng)目,該文件中有index.html和static兩個(gè)內(nèi)容。
將該dist文件上傳到服務(wù)器的某個(gè)位置即可
我上傳到/home/ubuntu文件中
配置nginx
修改nginx.conf
安裝nginx后,nginx的默認(rèn)目錄是/etc/nginx
在該目錄中有nginx.conf文件,輸入如下命令,使用vi打開(kāi)該文件
vi nginx.conf
我的nginx.conf文件原內(nèi)容如下
user www-data; worker_processes auto; pid /run/nginx.pid; include /etc/nginx/modules-enabled/*.conf; events { worker_connections 768; # multi_accept on; } http { ## # Basic Settings ## sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; # server_tokens off; # server_names_hash_bucket_size 64; # server_name_in_redirect off; include /etc/nginx/mime.types; default_type application/octet-stream; ## # SSL Settings ## ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE ssl_prefer_server_ciphers on; ## # Logging Settings ## access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; ## # Gzip Settings ## gzip on; # gzip_vary on; # gzip_proxied any; # gzip_comp_level 6; # gzip_buffers 16 8k; # gzip_http_version 1.1; # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; ## # Virtual Host Configs ## include /etc/nginx/conf.d/*.conf; include /etc/nginx/sites-enabled/*; } #mail { # # See sample authentication script at: # # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript # # # auth_http localhost/auth.php; # # pop3_capabilities "TOP" "USER"; # # imap_capabilities "IMAP4rev1" "UIDPLUS"; # # server { # listen localhost:110; # protocol pop3; # proxy on; # } # # server { # listen localhost:143; # protocol imap; # proxy on; # } #}
在http模塊中加入如下內(nèi)容,表示配置文件要引用hosts文件夾下的host后綴的文件。該host后綴文件就是用來(lái)配置vue項(xiàng)目的,一個(gè)host文件配置一個(gè)vue項(xiàng)目
include /etc/nginx/hosts/*.host;
修改后文件如下
user www-data; worker_processes auto; pid /run/nginx.pid; include /etc/nginx/modules-enabled/*.conf; events { worker_connections 768; # multi_accept on; } http { ## # Basic Settings ## sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; # server_tokens off; # server_names_hash_bucket_size 64; # server_name_in_redirect off; include /etc/nginx/mime.types; default_type application/octet-stream; ## # SSL Settings ## ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE ssl_prefer_server_ciphers on; ## # Logging Settings ## access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; ## # Gzip Settings ## gzip on; # gzip_vary on; # gzip_proxied any; # gzip_comp_level 6; # gzip_buffers 16 8k; # gzip_http_version 1.1; # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; ## # Virtual Host Configs ## include /etc/nginx/conf.d/*.conf; include /etc/nginx/sites-enabled/*; include /etc/nginx/hosts/*.host;#新添加的一行 } #mail { # # See sample authentication script at: # # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript # # # auth_http localhost/auth.php; # # pop3_capabilities "TOP" "USER"; # # imap_capabilities "IMAP4rev1" "UIDPLUS"; # # server { # listen localhost:110; # protocol pop3; # proxy on; # } # # server { # listen localhost:143; # protocol imap; # proxy on; # } #}
創(chuàng)建*.host文件
在/etc/nginx中創(chuàng)建hosts文件夾
mkdir hosts
在host文件中創(chuàng)建syt.host文件,文件名隨便命名
在文件中添加如下內(nèi)容
server { listen 8080;#自己設(shè)置端口號(hào) server_name syt;#自己設(shè)置項(xiàng)目名稱(chēng) #access_log logs/host.access.log main; location / { root /home/ubuntu/dist;#這里寫(xiě)vue項(xiàng)目的所在地址 index index.html;#這里是vue項(xiàng)目的首頁(yè),需要保證dist中有index.html文件 } error_page 500 502 503 504 /50x.html;#錯(cuò)誤頁(yè)面 }
重啟nginx
nginx -s reload
訪問(wèn)vue項(xiàng)目
ip:port/index.html即可進(jìn)行訪問(wèn)
常見(jiàn)錯(cuò)誤
瀏覽器訪問(wèn)時(shí)顯示403
這個(gè)問(wèn)題有多種原因,我當(dāng)時(shí)遇到的原因是該項(xiàng)目所在的文件沒(méi)有權(quán)限訪問(wèn)。我的項(xiàng)目所在文件是/home/ububtu/dist
使用如下命令保證可以訪問(wèn)(比較暴力qaq)
chmod -R 777 home
chmod -R 777 ubuntu
chmod -R 777 dist
總結(jié)
到此這篇關(guān)于ubuntu中利用nginx部署vue項(xiàng)目的文章就介紹到這了,更多相關(guān)ubuntu用nginx部署vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue使用ElemenUI對(duì)table的指定列進(jìn)行合算的方法
這篇文章主要介紹了Vue使用ElemenUI對(duì)table的指定列進(jìn)行合算的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03vue+elementUI動(dòng)態(tài)增加表單項(xiàng)并添加驗(yàn)證的代碼詳解
這篇文章主要介紹了vue+elementUI動(dòng)態(tài)增加表單項(xiàng)并添加驗(yàn)證的代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12簡(jiǎn)單聊聊Vue中的計(jì)算屬性和屬性偵聽(tīng)
計(jì)算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯,vue提供了檢測(cè)數(shù)據(jù)變化的一個(gè)屬性watch可以通過(guò)newVal獲取變化之后的值,這篇文章主要給大家介紹了關(guān)于Vue中計(jì)算屬性和屬性偵聽(tīng)的相關(guān)資料,需要的朋友可以參考下2021-10-10vue項(xiàng)目前端微信JSAPI與外部H5支付相關(guān)實(shí)現(xiàn)過(guò)程及常見(jiàn)問(wèn)題
這篇文章主要介紹了vue項(xiàng)目前端微信JSAPI與外部H5支付相關(guān)實(shí)現(xiàn)過(guò)程及常見(jiàn)問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue3配置全局參數(shù)(掛載全局方法)以及組件的使用
這篇文章主要介紹了vue3配置全局參數(shù)(掛載全局方法)以及組件的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07