这篇文章主要介绍“ubuntu中怎么用nginx部署vue项目”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“ubuntu中怎么用nginx部署vue项目”文章能帮助大家解决问题。
1.安装nginx
更新源列表
apt-get update安装nginx
apt-get install nginx检查nginx是否安装，输入如下命令后若出现版本号则安装成功
nginx -v启动nginx
server nginx restart在浏览器输入ip地址，若出现如下页面则启动成功
2. 打包上传vue项目到服务器
打包
我的项目使用的是vs code，在终端输入如下命令进行打包
npm run build上传
打包完成后会有dist文件，该文件为打包完成后的项目,该文件中有index.html和static两个内容。
将该dist文件上传到服务器的某个位置即可
我上传到/home/ubuntu文件中
配置nginx
修改nginx.conf
安装nginx后，nginx的默认目录是/etc/nginx
在该目录中有nginx.conf文件，输入如下命令，使用vi打开该文件
vi nginx.conf我的nginx.conf文件原内容如下
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: POODLEssl_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模块中加入如下内容,表示配置文件要引用hosts文件夹下的host后缀的文件。该host后缀文件就是用来配置vue项目的，一个host文件配置一个vue项目
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: POODLEssl_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;#}#}创建*.host文件
在/etc/nginx中创建hosts文件夹
mkdir hosts在host文件中创建syt.host文件，文件名随便命名
在文件中添加如下内容
server { listen 8080;#自己设置端口号 server_name syt;#自己设置项目名称 #access_log logs/host.access.log main; location / { root /home/ubuntu/dist;#这里写vue项目的所在地址 index index.html;#这里是vue项目的首页，需要保证dist中有index.html文件 } error_page 500 502 503 504 /50x.html;#错误页面 }重启nginx
nginx -s reload访问vue项目
ip:port/index.html即可进行访问
常见错误
浏览器访问时显示403
这个问题有多种原因，我当时遇到的原因是该项目所在的文件没有权限访问。我的项目所在文件是/home/ububtu/dist
使用如下命令保证可以访问(比较暴力qaq)
chmod -R 777 homechmod -R 777 ubuntuchmod -R 777 dist关于“ubuntu中怎么用nginx部署vue项目”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
