当前位置 : 主页 > 操作系统 > centos >

使用Nginx部署Vue项目全过程及踩坑记录

来源:互联网 收集:自由互联 发布时间:2023-03-17
目录 Nginx部署Vue项目 使用Nignx部署Vue项目步骤 1.打包Vue项目 2.复制dist文件夹到Vue默认目录 3.高级配置 重新启动 Nginx linux环境 总结 Nginx部署Vue项目 很多小伙伴在做完Vue项目之后,想要部
目录
  • Nginx部署Vue项目
  • 使用Nignx部署Vue项目步骤
    • 1.打包Vue项目
    • 2.复制dist文件夹到Vue默认目录
    • 3.高级配置
  • 重新启动 Nginx
    • linux环境
      • 总结

        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

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

        linux环境

        通常情况下很少使用windows来作为nginx的服务器,一般使用linux。

        对于linux安装nginx有两种方式

        • 一种是使用官方已经编译好的包来安装
        • 一种是使用源码构建安装

        第一种方式参考官方地址https://nginx.org/en/linux_packages.html#stable

        第二种方式参考官方地址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

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

        总结

        以上为个人经验,希望能给大家一个参考,也希望大家多多支持自由互联。

        上一篇:ApacheJMeter5.5下载安装及设置中文图文教程
        下一篇:没有了
        网友评论