how to run multiple vue inside express

Question

first, im not good at english, sorry for that

im making a personal portfolio site with vue3, express. in express, main vue project is rendered, and my many sub proejct file(static html, vue etc..) are in project folder

here is my folder structure,

frontend
│  └ (main vue project)
│
backend (express)
   │ kinder (sub vue project)
   │ dist (main vue project builded here)
   │  │ project
   │  │   └ (sub projects here)
   │  │ 
   │  └ ...
   │
   │ node_modules
   │ public
   │ src
   └ ...

(i dosen't matter where is my sub vue project(kinder) folder)

in case of static html project, just add "/project/projectName/index.html" to address, but builded vue project cause route confusion. so i tried so may solution like change route history mode to hash mode and setting pathRewrite, baseUrl, etc on vue.config.js file but nothing success.

i just know about html, css, js, vue so my first time use server side language. just google it, i found solution that run multiple app in one server. but i have no clue about server.

even if i cant get explaination about solution, but can i get some hint that solve this problem? just throw simple solution keyword, then i will google it very hard! i love this!

summary

i want run two vue app in one express
but i have no clue about server language
can i get some solution or hint?

my backend folder structure

modified app.js according to anwser

but /kinder/index.html page shows 404 error

i used "connet-history-api-fallback" middleware accroding to vue document, because that said consider using this

so first, without this got error like express can't understand builded vue css, js etc. after using this middleware got no error but nothing showed

user_7426416 · Answer

I guess that your static files in backend/dist/ is served by express, and using express.static middleware.

As the document says, you can find the route config code in express, then change it like this:

// main vue project
app.use('/main', express.static('dist/'));
// sub vue project
app.use('/kinder', express.static('dist/project/kinder'));

Now, you can visit two vue app from different url:

http://www.xxx.xx/main/index.html
http://www.xxx.xx/kinder/index.html

how to run multiple vue inside express

1 Answers