如何将vue-cli开发模式与服务器端api相结合？

Question

I'm new to vue and kind of confuse here.

I'm using vue-cli to build a vue app, I understand I can run a development server with npm run serve which is referenced as a script in my package.json for vue-cli-service serve

But my app need some data coming from a local node.js server. I cannot request this server from development mode because it's running on a different server. To make my app work I'm obligated to build for production with

npm run build

Then to ask my node server to render by default the produced index.html file.

How could I combine development mode and my node server?

What would be the best way to make this work?

Thanks a lot

Answer 1

I stumbled across this, and found the answer buried at the bottom of the comments list, so I thought I'd highlight it.
This answer is taken from @Frank Provost comment, which really should be the accepted answer. As mentioned in his link https://cli.vuejs.org/config/#devserver-proxy all you need to do is create/edit vue.config.js file in your (client) project root to include this:

module.exports = {
  devServer: {
    proxy: 'http://localhost:3000' // enter dev server url here 
  }
}

Then start your dev server as usual from your server project:

[server-root]$ npm run dev

And run your client project from vue-cli project

[client-root]$ npm run serve

Then when you visit the client url (usually localhost:8080) all api requests will be forwarded to your dev server. All hot module replacement still works on both client and server.