Nginx部署Vue项目

nginx安装

sudo apt-get install nginx

检查nginx是否安装成功。如果出现版本号说明安装成功

nginx -v

ginx的配置文件和静态资源文件分布在不同的地方:

/usr/sbin/nginx：主程序
/etc/nginx：存放配置文件(nginx.conf)
/usr/share/nginx：存放静态文件
/var/log/nginx：存放日志

配置nginx

nginx.conf配置文件中并没有 配置端口号和IP，这个我们需要自己手动添加，为了便于修改，我们将vue项目的配置放在其他地方文件里，在nginx.conf 只需要将vue项目的配置文件所在路径引入即可。
第一步，在/etc/nginx目录下创建配置文件目录hosts

cd /etc/nginx    #切换到/etc/nginx路径下
sudo mkdir hosts      #新建目录hosts

第二步，进入hosts目录，创建第一个项目配置文件

cd /etc/nginx/hosts    #切换到/etc/nginx路径下
sudo nano app1.host

第三步，加入端口号和IP相关配置，然后将下面提供的配置模板拷贝进去

server {
        listen       3000;#自己设置端口号
        server_name  app1;#自己设置项目名称
        #access_log  logs/host.access.log  main;
        location / {
            root   /home/lxp/project/app1;#这里写vue项目的所在地址
            index  index.html;#这里是vue项目的首页，需要保证dist中有index.html文件
        }
        location /api/ {
            proxy_pass http://127.0.0.1:8080/api/;
            error_page 405 =200 @405;
         }
 
        error_page   500 502 503 504  /50x.html;#错误页面
    }

引入vue项目配置文件的路径

准备工作做好以后，下面就需要在nginx的配置文件中引入 vue配置文件的路径，一个项目一个配置文件。

cd /etc/nginx
sudo nano nginx.conf    #编辑nginx配置文件

需要在nginx配置文件加入以下代码即可

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

将vue项目打包产生的dist文件放置配置文件中配置的目录
重启nginx

nginx -s reload

通过服务器ip:port/index.html即可进行访问vue项目