What's the best way to connect Vue.js with Express backend and is Vue CLI necessary?

Frontend
1

I’m working on a web application using Express.js for the backend and Vue.js for the frontend. I’m confused about the different approaches I’ve seen online.

Method 1: Separate Development Servers
Some developers run Vue and Express as separate applications during development, with the frontend making HTTP requests to API endpoints. Is this approach used in real production environments too?

Method 2: Building and Serving Static Files
I also noticed that you can compile Vue into static files and let Express serve them directly. When using this method, does the Vue app still communicate with Express through API calls like in development mode?

Method 3: Simple Script Tag Approach
Finally, I’m wondering if I can skip Vue CLI entirely and just include Vue via a script tag. What functionality would I lose by taking this simpler route?

My main questions are:

  • Which deployment strategy is better for production?
  • Do I need to modify my Express code when switching from development to production?
  • What are the trade-offs between using Vue CLI versus plain Vue.js?

Any guidance would be really helpful since I’m trying to choose the right architecture for my project.

2

i think method 2 is def the way to go for prod. super easy to handle! if ya avoid Vue CLI, u’ll miss out on hot reload and cool build stuff. and yeah, express routes don’t change between dev and prod, so that’s good.

3

What app are you building? That’d help figure out the best approach. Have you tried mixing methods? Like using Vue CLI for dev but serving the built files through Express routes instead of nginx? Could work well for smaller projects.

4

Method 1 with a reverse proxy works great in production. I’ve deployed tons of apps this way - swap out the Vue dev server for nginx serving static files, keeping your Express API endpoints separate. Communication stays the same between development and production. If you skip Vue CLI, you lose a lot like single-file components, ES6 bundling, and optimized builds. The script tag route only gives you basic Vue without modern JavaScript features that help organize code and boost performance. Your Express backend requires minimal changes for production, mainly just tweaking CORS settings and static file paths.