CODEWITHSUNDEEP
javascriptvue.jsexpress
purplenaive
purplenaive

Reputation: 11

how to run multiple vue inside express

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

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

my backend folder structure enter image description here

modified app.js according to anwser enter image description here

but /kinder/index.html page shows 404 error enter image description here

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

Upvotes: 1

Views: 422

Answers (1)

BigLiao
BigLiao

Reputation: 561

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

Upvotes: 1

Related Questions