nuxt.js项目使用pm2部署时遇到的问题及解决方案更新

最新推荐文章于 2024-09-11 16:33:57 发布

sunny327

最新推荐文章于 2024-09-11 16:33:57 发布

阅读量4k

点赞数

分类专栏： nuxt.js 文章标签： pm2 nuxt.js

本文链接：https://blog.csdn.net/sunny327/article/details/103209966

版权

nuxt.js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

背景：

最近在做的一个项目用的是nuxt.js框架。产品需要nginx映射到xsn.com.cn/anchor即访问xsn.com.cn/anchor就是访问http:localhost:3000。但是nuxt.js项目都是通过根路径进行访问的。目前这种情况我还没处理过。上网搜了很久也没找到解决方案。

（注：最终在域名后面加/anchor的方式总是不行，后来改为了用二级域名来访问：http://anchor.xsn.com.cn）

一、手动部署在生产环境进行测试，报如下错误：

nginx配置如下：

server {
        listen 443;
        server_name xsn.com.cn www.xsn.com.cn;
        index /vocy-site/;
        charset utf-8;
        ssl_certificate  /nginx/cert/xsn.com.cn.pem;
        ssl_certificate_key  /nginx/cert/xsn.com.cn.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;

         location /study/{
            rewrite ^(.*) http://xuexi.xsn.com.cn$1 permanent;
        }



        location /studyList/ {
              rewrite ^(.*) http://xuexi.xsn.com.cn$1 permanent;
        }
        location /article/{
              rewrite ^(.*) http://xuexi.xsn.com.cn$1 permanent;
        }

     location /anchor/ {
              proxy_pass http://localhost:3000/;
     }


    //下面这个是域名访问的我们网站的主页，anchor只能算是一个专题
    location / {
                if ($request_uri ~* "^/$"){
                        #if ($request_method = GET ) {
                                 #return 405;
                        #       rewrite ^(.*) https://cnypa.vocy.cn$1 permanent;
#                       }
                   rewrite ^(.*) https://cnypa.vocy.cn$1 permanent;
                }
                proxy_pass http://localhost:9495/vocy-site/;
                proxy_cookie_path  /vocy-site /;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_intercept_errors on;


               #add_header Access-Control-Allow-Origin  *;
               #add_header Access-Control-Allow-Headers Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With;
               #add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
               #add_header Access-Control-Allow-Credentials true;
               #add_header Access-Control-Allow-Headers X-Data-Type,X-Auth-Token;

                #add_header 'Access-Control-Allow-Origin' $http_origin;
                #add_header 'Access-Control-Allow-Credentials' 'true';
                #add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                #add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                #add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';


                add_header Access-Control-Allow-Origin $http_origin;
                add_header Access-Control-Allow-Headers Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With;
                add_header Access-Control-Allow-Methods OPTIONS;
                add_header Access-Control-Allow-Credentials true;
                add_header Access-Control-Allow-Headers X-Data-Type,X-Auth-Token;


       }




}

（1）猜想是接口404，没有数据发到前台，并且也没做异常处理，所以页面就显示成这样了。后为是把整个项目删除了，再从gitlab上拉取，再安装依赖等一系列操作。然后再运行npm run build npm run pm2 ，但是这样还是不行！！！

（2）https://blog.csdn.net/sunny327/article/details/102603166 按照这个链接中的安装依赖的顺序又重新安装了一遍。还是不行！！！

（3）最终有效的解决方案：最后把pm2 更新了一下，命令如下：pm2 update 。目前版本是4.1.2，但我觉得这个也不是根本的原因，因为多之前也是4.1.2版本的。再有就是在pages中新增了一个error.vue文件，用来显示服务端报错，是以浏览器中用户可以看的懂的方式呈现错误，这样也便于开发调试。参考链接：https://blog.lichter.io/posts/nuxtjs-change-server-error-page/

目录如下：

error.vue:

<template></template>
<script>
export default {
  asyncData() {
    throw new Error('server error!')
  }
}
</script>

以生产环境启动项目，在浏览器中输入http://localhost:3000/error就可以看到这个页面。页面竟然可以访问了，目前是采用的二级域名的方式：http://anchor.xsn.com.cn

nginx的配置如下：

server {
                listen 80;
                server_name anchor.xsn.com.cn;


                location /{

                                proxy_pass http://localhost:3000;
                        }


}

二、使用npm2启动时也会报：Cluster mode "ENOENT: no such file or directory, uv_cwd" issue.

解决方案：