nginx部署vue

最新推荐文章于 2025-04-04 00:17:48 发布

原创最新推荐文章于 2025-04-04 00:17:48 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue

本文详细介绍了如何在CentOS 6.8环境下安装Nginx 1.16.0，并配置Vue项目进行部署。涵盖了从Nginx的源配置、安装、启动到Vue项目打包、上传、反向代理设置的全过程。

环境

nginx:1.16.0

centos:6.8

安装nginx

vim /etc/yum.repos.d/nginx.repo

写入内容

[nginx]
name=nginx repo
#baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
baseurl=http://nginx.org/packages/centos/6/$basearch/
gpgcheck=0
enabled=1

yum clean all
yum repolist
yum info nginx
yum install nginx

查看nginx信息

启动nginx

service nginx start  启动
service nginx stop  停止
service nginx restart  重启

访问地址你的ip，默认80端口

vue项目打包

npm run build

vue项目打包

将dist文件夹打zip，上传到服务器

修改nginx配置

vim /etc/nginx/conf.d/default.conf

server {
        listen       1888;  #vue 反向代理的端口
        server_name  #你服务器的ip;

        location / {
          root  /usr/local/softwore/saber/dist/;  #vue项目的路径
          index  index.html index.htm;
         }
        location /api {
          proxy_pass http://**.56.177.**:8011/;   #后台服务的访问ip+端口
        }

}

vue.config.js