这篇文章主要介绍“ubuntu中怎么用nginx部署vue项目”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“ubuntu中怎么用nginx部署vue项目”文章能帮助大家解决问题。

更新源列表

apt-getupdate

安装nginx

apt-getinstallnginx

检查nginx是否安装，输入如下命令后若出现版本号则安装成功

nginx-v

启动nginx

servernginxrestart

在浏览器输入ip地址，若出现如下页面则启动成功

打包

我的项目使用的是vs code，在终端输入如下命令进行打包

npmrunbuild

上传

打包完成后会有dist文件，该文件为打包完成后的项目,该文件中有index.html和static两个内容。

将该dist文件上传到服务器的某个位置即可

我上传到/home/ubuntu文件中

修改nginx.conf

安装nginx后，nginx的默认目录是/etc/nginx

在该目录中有nginx.conf文件，输入如下命令，使用vi打开该文件

vinginx.conf

我的nginx.conf文件原内容如下

userwww-data;worker_processesauto;pid/run/nginx.pid;include/etc/nginx/modules-enabled/*.conf;events{worker_connections768;#multi_accepton;}http{###BasicSettings##sendfileon;tcp_nopushon;tcp_nodelayon;keepalive_timeout65;types_hash_max_size2048;#server_tokensoff;#server_names_hash_bucket_size64;#server_name_in_redirectoff;include/etc/nginx/mime.types;default_typeapplication/octet-stream;###SSLSettings##ssl_protocolsTLSv1TLSv1.1TLSv1.2TLSv1.3;#DroppingSSLv3,ref:POODLEssl_prefer_server_cipherson;###LoggingSettings##access_log/var/log/nginx/access.log;error_log/var/log/nginx/error.log;###GzipSettings##gzipon;#gzip_varyon;#gzip_proxiedany;#gzip_comp_level6;#gzip_buffers168k;#gzip_http_version1.1;#gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;###VirtualHostConfigs##include/etc/nginx/conf.d/*.conf;include/etc/nginx/sites-enabled/*;}#mail{##Seesampleauthenticationscriptat:##http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript###auth_httplocalhost/auth.php;##pop3_capabilities"TOP""USER";##imap_capabilities"IMAP4rev1""UIDPLUS";##server{#listenlocalhost:110;#protocolpop3;#proxyon;#}##server{#listenlocalhost:143;#protocolimap;#proxyon;#}#}

在http模块中加入如下内容,表示配置文件要引用hosts文件夹下的host后缀的文件。该host后缀文件就是用来配置vue项目的，一个host文件配置一个vue项目

include/etc/nginx/hosts/*.host;

修改后文件如下

userwww-data;worker_processesauto;pid/run/nginx.pid;include/etc/nginx/modules-enabled/*.conf;events{worker_connections768;#multi_accepton;}http{###BasicSettings##sendfileon;tcp_nopushon;tcp_nodelayon;keepalive_timeout65;types_hash_max_size2048;#server_tokensoff;#server_names_hash_bucket_size64;#server_name_in_redirectoff;include/etc/nginx/mime.types;default_typeapplication/octet-stream;###SSLSettings##ssl_protocolsTLSv1TLSv1.1TLSv1.2TLSv1.3;#DroppingSSLv3,ref:POODLEssl_prefer_server_cipherson;###LoggingSettings##access_log/var/log/nginx/access.log;error_log/var/log/nginx/error.log;###GzipSettings##gzipon;#gzip_varyon;#gzip_proxiedany;#gzip_comp_level6;#gzip_buffers168k;#gzip_http_version1.1;#gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;###VirtualHostConfigs##include/etc/nginx/conf.d/*.conf;include/etc/nginx/sites-enabled/*;include/etc/nginx/hosts/*.host;#新添加的一行}#mail{##Seesampleauthenticationscriptat:##http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript###auth_httplocalhost/auth.php;##pop3_capabilities"TOP""USER";##imap_capabilities"IMAP4rev1""UIDPLUS";##server{#listenlocalhost:110;#protocolpop3;#proxyon;#}##server{#listenlocalhost:143;#protocolimap;#proxyon;#}#}

创建*.host文件

在/etc/nginx中创建hosts文件夹

mkdirhosts

在host文件中创建syt.host文件，文件名随便命名

在文件中添加如下内容

server{listen8080;#自己设置端口号server_namesyt;#自己设置项目名称#access_loglogs/host.access.logmain;location/{root/home/ubuntu/dist;#这里写vue项目的所在地址indexindex.html;#这里是vue项目的首页，需要保证dist中有index.html文件}error_page500502503504/50x.html;#错误页面}

重启nginx

nginx-sreload访问vue项目

ip:port/index.html即可进行访问

浏览器访问时显示403

这个问题有多种原因，我当时遇到的原因是该项目所在的文件没有权限访问。我的项目所在文件是/home/ububtu/dist

使用如下命令保证可以访问(比较暴力qaq)

chmod-R777home

chmod-R777ubuntu

chmod-R777dist

关于“ubuntu中怎么用nginx部署vue项目”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。