使用Nginx部署Vue项目超详细图文教程！含踩坑步骤！

﹏ヽ暗。殇╰゛Y 2022-11-12 11:53 1218阅读 0赞

# Nginx部署Vue项目 #

很多小伙伴在做完Vue项目之后，想要部署到服务器上自己运行试试。其实使用Nginx就可以轻松的做到，并且实现请求转发等功能。下面来看看使用步骤吧。

# 使用Nignx部署Vue项目步骤 #

# 1.打包Vue项目 #

npm run build

首先使用打包命令打包Vue项目，之后得到一个dist文件夹。这里面存放的是已经打包好的静态资源文件。

![image-20210323233440687][]

![image-20210323233426363][]

注意：这里不同的项目打包的命令可能不一样，需要在 package.json 里看 scripts，每个属性就是一个命令，一般都会有 npm run serve, npm run build, npm run lint… 等等

![image-20210323233545259][]

不同的项目结构不一样哦。我使用的是vue-element-admin框架。具体打包方法可以查看框架的相关文档哦。

# 2.复制dist文件夹到Vue默认目录 #

安装好Nginx，找到安装根目录。将dist目录里的文件复制到html中。这是默认的nginx根目录，如果这样做的话你不用修改配置文件就可以直接运行。

![image-20210323233713317][]

复制完成后，双击nginx.exe运行nginx就可以运行啦。

# 3.高级配置 #

通常情况下ngxin是安装到单独的服务器上，因此一般是把vue打包后的dist仍到服务上的具体位置，然后修改nginx.conf的root路径来指向我们的dist。

如果你想根据自己的需求来配置nginx，或者想部署多个项目的话。你需要通过修改配置文件来完成。

这里放一个我自己的配置。具体可以参考注释。

server { 
        # 需要被监听的端口号，前提是此端口号没有被占用，否则在重启 Nginx 时会报错
        listen       8888;
        # 服务名称，无所谓
        server_name  localhost;
    
        # 上述端口指向的根目录
        root /opt/asing1elife/teamnote;
        # 项目根目录中指向项目首页
        index index.html;
    
        client_max_body_size 20m; 
        client_body_buffer_size 128k;
    
        # 根请求会指向的页面
        location / { 
          # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
          try_files $uri $uri/ @router;
          # 请求指向的首页
          index index.html;
        }
    
        # 由于路由的资源不一定是真实的路径，无法找到具体文件
        # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
        location @router { 
          rewrite ^.*$ /index.html last;
        }
    
        # 关键步骤，这里表示将所有的 http://192.168.7.8:8888/teamnote/api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
        # 这里使用 /teamnote/api/ 而不是 /teamnote/ ，是因为前端项目本身的访问链接就是 http:192.168.7.8:8888/teamnote/
        # 为了防止在访问页面时请求就被 Nginx 代理转发，这里需要更具体的配置，才能和前端访问请求区分开
        location /teamnote/api/ { 
              # 后端的真实接口
              proxy_pass http://192.168.7.8:2592/teamnote/api/;
              proxy_redirect off;
              proxy_set_header Host $host;
              proxy_set_header X-Real-IP $remote_addr;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header   Cookie $http_cookie;
              # for Ajax
              #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
              proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
              proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
              proxy_set_header x-requested-with $http_x_requested_with;
              client_max_body_size 10m;
              client_body_buffer_size 128k;
              proxy_connect_timeout 90;
              proxy_send_timeout 90;
              proxy_read_timeout 90;
              proxy_buffer_size 128k;
              proxy_buffers 32 32k;
              proxy_busy_buffers_size 128k;
              proxy_temp_file_write_size 128k;
        }
    }

# 重新启动 Nginx #

1.  使用 `nginx -s reload` 可以重新加载 Nginx 的配置文件，但如果配置文件有错，不一定会抛出异常
2.  使用 `nginx -s stop` 先停止 Nginx 服务，再使用 `nginx` 尝试启动 Nginx 服务，如果配置文件有异常，则会抛出异常告知启动失败

# linux环境 #

通常情况下很少使用windows来作为nginx的服务器，一般使用linux。对于linux安装nginx有两种方式，一种是使用官方已经编译好的包来安装，一种是使用源码构建安装。

第一种方式参考官方地址[https://nginx.org/en/linux\_packages.html\#stable][https_nginx.org_en_linux_packages.html_stable]

第二种方式参考官方地址[https://nginx.org/en/docs/install.html][https_nginx.org_en_docs_install.html]中的Building from Sources片段，这种实际上就是下一个tar.gz包仍到linux服务去自己编译。

在linux服务上和window环境上使用nginx部署vue项目并没有太大差异，把构建好的vue项目dist上传到linux服务上，通用修改nginx服务器中的root来指向dist就ok了，然后使用

# centos 7
    systemctl restart nginx.service
    # centos 6
    service nginx restart

或者是平滑重启

service nginx reload

centos 7  
systemctl restart nginx.service

# centos 6 #

service nginx restart

或者是平滑重启

service nginx reload

当然，我更推荐宝塔面板，操作简介方便！

[image-20210323233440687]: /images/20221022/c1aa09c80b374474a319a00ab11cb0ad.png
[image-20210323233426363]: /images/20221022/f49bf911eae24b75b0a6c3ee1455672b.png
[image-20210323233545259]: /images/20221022/cc4eb7cc4f174c5697dc154d9e225c00.png
[image-20210323233713317]: /images/20221022/4dc644d9aa3d406d907c9b0127df3b5a.png
[https_nginx.org_en_linux_packages.html_stable]: https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fnginx.org%2Fen%2Flinux_packages.html%23stable
[https_nginx.org_en_docs_install.html]: https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fnginx.org%2Fen%2Fdocs%2Finstall.html