nuxt.js - 无法定义主机和端口

Question

nuxt.js always defaults to localhost despite host being defined as frontend.gradez.loc in nuxt.config.js

Contents of nuxt.config.js :

server: {
  host: 'frontend.gradez.loc',
  port: 3000
},

Contents of package.json :

"config": {
  "nuxt": {
    "host": "frontend.gradez.loc",
    "port": "3000"
  }
}

nuxt launch script as dev :

"dev": "nuxt --hostname frontend.gradez.loc --port 3000",

For some odd reason when starting the development script it always defaults to: Listening on: http://localhost:3000/

I tried to do exactly the same on react and the only thing I had to do was create a .env file and inside it I added host=frontend.gradez.loc and it worked just like that.

Answer 1

To create your server, under the hood Nuxt uses Node's http.createServer , then calls listen({ host, port }) on that server.

So if on your local machine the hostname frontend.gradez.loc is mapped to 127.0.0.1 , which I assume is the case, then that server is running on the IP 127.0.0.1 .

To create the url you see printed in Listening on... , Nuxt gets the IP of that underlying server, and maps it back to a hostname string. It statically maps the IP 127.0.0.1 to the string 'localhost' , so no matter what host you configure, if it maps to 127.0.0.1 then Nuxt will always map that to localhost in that url. The code that does this is here .

There's nothing incorrect per-se about reporting the server is running on localhost:3000 rather than frontend.gradez.loc:3000 . It's literally true, in a networking sense, because both ultimately point to 127.0.0.1:3000 . So nothing is broken here from the perspective of the dev server, it's working as designed.

I'm not sure if you have anything automatically loading that url in the browser when you start the server - if so I can see how this is inconvenient from the perspective of other things in your workflow coupled to that hostname such as cookies, proxy servers etc - but if you manually type frontend.gradez.loc:3000 into your browser everything will just work.