使用Nginx部署Vue项目

本文以vue-next-admin开源项目为例，讲述如何利用Nginx进行前端项目的打包和部署

1.项目打包

        a.修改项目在生产环境中的API地址

        b.在src根路径下运行打包命令

npm run build:prod

打包命令可在package.json中进行查看

完成打包之后，项目根路径中会多出一个dist文件夹

2.上传并解压项目文件

        a.利用lrzsz命令工具上传打包后的项目压缩包

# 如果服务器没有安装lrzsz，则需要先行安装
sudo apt install lrzsz  # 如果是CentOS则是：yum -y install lrzsz

# 上传项目压缩包
rz (按下回车选择文件)

        b.解压缩

# 这里以.zip后缀为例
# 如果没有安装unzip则需先行安装
sudo apt install unzip  # 如果是CentOSz则是：yum -y install unzip

# 解压缩包
unzip dist.zip

3.修改Nginx配置文件

        这里我使用了Docker先行安装了Nginx，并创建了对应的挂载目录，所以直接修改挂载目录中的配置文件。如果你使用了Docker作为容器，请参考Docker安装Nginx(详细教程)

        a.修改nginx.conf或default.conf配置文件

        看见网上很多文章都是喊修改nginx.conf文件，但是博主在实际的部署过程中还是得修改conf/conf.d目录下的default.conf配置文件

# 实际的路径以自己服务器上的路径为主
cd /home/nginx/conf/conf.d

# 使用vim对配置文件进行编辑
vim default.conf

        b.配置文件修改如下

server {
        # 前端项目要部署到什么端口
        listen       9527;
        server_name  localhost;

        location / {
            # 告诉nginx，前端打包好的文件在哪里 
            root   /usr/share/nginx/html/;
            # index配置首页文件
            index  index.html index.htm;
        }
 
    }

        因为我懒得修改配置文件中的路径，所以我直接在nginx目录下，将解压的dist目录名称更改为html

# 将dist目录名称改为html
mv dist html  # 如果没有删除原先的html目录的话，最好先行删除

        最后，重启Docker容器，并开放相应的服务端口就可以正常访问我们的前端项目了