'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 |
|---|
