nuxt 服务端渲染 asyncData 区分开发和生产环境

本项目使用 nuxt2 开发，pm2 部署

本地开发和服务端渲染 请求时，将请求的url写固定了。可能会导致一些问题，服务端部署的域名变动时，会导致跨域或者服务不可用，[挠头].[冥思苦想]。以花费掉几根头发，终于实现了相应的方案，优化中...

1.vue 文件

// 请求数据的接口
async asyncData(){
    const params = {
        page: 1,
        page_size: 10,
    }

    let BASE_URL = '';
    if(process.env.NODE_ENV == 'development') {
        BASE_URL = 'http://www.abc.com' // 测试环境的url
    } else  {
        BASE_URL = process.env.SERVER_URL // pm2.config.js 有配置
    }

    const reqUrl = `${BASE_URL}/api/list`
    const res = await axios.get(reqUrl, { params }).catch(_ => _)
    if(res.data.code != 0) {
        return {};
    }
    const data = res.data.data || {}
    return {
        list: data?.list,
        total: data?.total
    }
}

2. pm2配置
   此时服务端渲染时，会请求SERVER_URL的服务，自动转发到nginx配置的反向代理上

module.exports = {
  apps: [
    {
      name: 'nuxt-app',
      script: 'npm',
      args: 'start',
      instances: '1', // max 启动的实例数，可以根据服务调整
      autorestart: true,
      watch: false,
      // max_restarts: 100,
      // max_memory_restart: '1G',
      env: {
        // 启动的环境变量
        NODE_ENV: 'production',
        PORT: 3001,
        SERVER_URL: 'http://127.0.0.1',
        // SERVER_URL: 'http://server-api' 配置本地服务器域名
      }
    }
  ]
};

3. nginx 配置

http{
    # 配置负载
    upstream server-api { 
        server 192.168.1.101 weight=5; # 高权重  分配权重
        server 192.168.1.102 weight=3; # 中等权重 
        server 192.168.1.103 weight=1; # 低权重 
    }
    server {
            
            listen       80;
            server_name  localhost; # 配置改为域名

            # 后端服务 
            location /api {
               proxy_pass   http://server-api; # 配置后端的代理的域名或配置的负载地址
            }

            # 服务端渲染的html
            location / {
                # node_server
                proxy_pass http://127.0.0.1:3001;
            }


            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }

            

        }
        
    }

然后，在虚拟机上跑一圈，欧克，大功告成，加鸡腿