导航：首页 > 开发技术 >

ubuntu中怎么用nginx部署vue项目

发表于：2024-12-04 作者：千家信息网编辑

千家信息网最后更新 2024年12月04日，这篇文章主要介绍"ubuntu中怎么用nginx部署vue项目"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"ubuntu中怎么用nginx部署vue项目"文章

千家信息网最后更新 2024年12月04日ubuntu中怎么用nginx部署vue项目

这篇文章主要介绍"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: 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模块中加入如下内容,表示配置文件要引用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: 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;#       }#}

创建*.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