亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

ubuntu中利用nginx部署vue項(xiàng)目的完整步驟

 更新時(shí)間:2022年02月20日 10:38:36   作者:拉里拉  
Nginx是一款輕量級(jí)的Web服務(wù)器/反向代理服務(wù)器及電子郵件(IMAP/POP3)代理服務(wù)器,在BSD-like 協(xié)議下發(fā)行,下面這篇文章主要給大家介紹了關(guān)于ubuntu中利用nginx部署vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下

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)行合算的方法

    這篇文章主要介紹了Vue使用ElemenUI對(duì)table的指定列進(jìn)行合算的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-03-03
  • Vue?Router組合布局用法詳解

    Vue?Router組合布局用法詳解

    今天我們用一種新的布局方式,使用路由視圖來(lái)實(shí)現(xiàn)布局樣式,本文將給大家介紹如何使用Vue?Router組合布局,文中有詳細(xì)的代碼示例供大家參考,感興趣的同學(xué)可以跟著小編一起學(xué)習(xí)
    2023-05-05
  • vue+elementUI動(dòng)態(tài)增加表單項(xiàng)并添加驗(yàn)證的代碼詳解

    vue+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)

    簡(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-10
  • vue項(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)題

    這篇文章主要介紹了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-04
  • Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼

    Vue 引入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-04
  • vue3配置全局參數(shù)(掛載全局方法)以及組件的使用

    vue3配置全局參數(shù)(掛載全局方法)以及組件的使用

    這篇文章主要介紹了vue3配置全局參數(shù)(掛載全局方法)以及組件的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • 詳解Vue中如何避免濫用watch

    詳解Vue中如何避免濫用watch

    這篇文章主要為大家詳細(xì)介紹了Vue中濫用watch帶來(lái)的問(wèn)題以及如何解決,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-03-03
  • Vue六大基本類(lèi)型中的原始值響應(yīng)式

    Vue六大基本類(lèi)型中的原始值響應(yīng)式

    原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等類(lèi)型的值,在 JavaScript 中,原始值是按值傳遞的,引用類(lèi)型是按引用傳遞的,這意味著,如果一個(gè)函數(shù)接收了一個(gè)原始值作為參數(shù),那么形參和實(shí)參之間是沒(méi)有引用關(guān)系的,它們是完全獨(dú)立的兩個(gè)值
    2023-01-01
  • 詳解Vue-Router的安裝與使用

    詳解Vue-Router的安裝與使用

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。本文介紹下Vue Router的安裝與使用
    2021-06-06

最新評(píng)論