[已解决]nuxtjs项目部署到nginx端口冲突配置无法请求数据的问题

话说小编的又一个nuxtjs项目(vue）要联调了，后端使用的是nginx，于是我们按照后端的指示将我们的项目文件全部放到他们的环境指定的文件目录，后端给过来的文件已经有nginx了，我们只需要在本地安装好mysql，设置好mysql密码，然后还要安装redis，设置密码；然后启动nginx（start.bat），再启动redis服务，连接数据库mysql，后端环境准备就绪，然后用cmd命令去到前端文件夹，运行：npm run dev；由于前后端请求的接口要相同，我特意把nuxtjs监听端口改成了后端的8888；但是发现这样会冲突，nuxtjs端口被随意换了一个端口50796，提示文字为：Address 0.0.0.0:8888 is already in use；按照localhost:50796访问，虽然可以打开页面，但是请求后端数据是报错的，$axios接口无法请求成功；

然后弄了好久，各种程序重启，依然不行，后面慢慢查资料才发现，是nginx需要做代理配置，下面直接贴上nuxtjs与nginx配置文件的设置方法：

nuxt.config.js，这个文件配置的端口是3002，也就是前端平时开发监听的端口；

  server:{
      host:'0.0.0.0',
      port:3002
  }

后端nginx文件里找到nginx.conf文件，配置如下：

server {
        listen       8888;
        server_name  localhost;

        location / {
            proxy_pass http://localhost:3002;
        }
}

这里后端nginx监听的端口是8888，前端监听的端口是3002；这样配置好后，前后端启动的端口就不会冲突了，但是访问的时候要访问后端的端口地址:localhost:8888才是正确的；

其实上面的配置就是将访问localhost:8888端口的连接转到localhost:3002去，在后端的端口上获得前端的页面；这样我们就既可以访问前端页面也能请求后端数据，统一起来了；

因此我们配置好后就不能直接访问localhost:3002这个端口了，想要请求到数据，就要访问后端的localhost:8888端口，对应的也就请求到后端的数据；如果直接访问localhost:3002，前端页面虽然可以打开，但是请求不到后端的数据，执行$axios请求会直接报错，原因是没有经过后端代理；

不知道这样说大家能不能看懂，不过不要心急，看多几遍就理解了；快去试试吧