'how to serve a vue js app with express and node?

i have a vue js project created with

vue create vue-js-client-crud

and built it with command

 npm run build

file : router.js

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      alias: "/products",
      name: "tutorials",
      component: () => import("./components/List")
    },
    {
      path: "/products/:id",
      name: "products-details",
      component: () => import("./components/product")
    },
    {
      path: "/add",
      name: "add",
      component: () => import("./components/Add")
    }
  ]
});

ran into an example where , this vue js project is served by using express js via another project. so the set up is , create another nodewithExpress project, see sample package.json file and server.js. once this project is created, we create a views folder and then copy dist folder content from vue js project to this project. does this work and i didn't fully understand the set up. so in the express project , do we set up the routes exactly the same as we have in vue js project ? but this set up shouldn't work with spa pages , right?

{
  "name": "nodeWithexpress",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.1"
  }
}

file : server.js

const express = require("express");
const cors = require("cors");
const app = express();
var corsOptions = {
  origin: "http://localhost:8081"
};
app.use(cors(corsOptions));

app.use(express.json());

app.use(express.urlencoded({ extended: true }));

app.get("/", (req, res) => {
  res.json({ message: "hello express." });
});

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`start server on port ${PORT}.`);
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source