6

This is my file-tree:

|-package.json
|-vite.config.js
|-pages/
|--main/
|---index.html
|---main.js
|--admin/
|---index.html
|---main.js

We know we can create a multi pages in this way:

But if I try to change the structure of files,i couldnt visit the index.html page by localhost:3000 or visit pages/admin/index.html by the url (localhost:3000/admin/index.html) when running script (vite).

Actually I just want to put the files together so I changed the structure of files and paths in vite.config.js,The result is that the pages didn't come out.

// vite.config.js
const { resolve } = require('path')

module.exports = {
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'pages/main/index.html'),
        admin: resolve(__dirname, 'pages/admin/index.html')
      }
    }
  }
}
radiorz
  • 1,459
  • 4
  • 18
  • 36
  • 1
    What did not work? What is the content of these files? The question lacks clear problem statement and https://stackoverflow.com/help/mcve – Estus Flask Aug 29 '21 at 13:20
  • I could visit the page through localhost:3000 correctly. @EstusFlask, – radiorz Aug 29 '21 at 15:40
  • 1
    The question cannot be answered in it's current form. "Doesn't work" is not a problem statement. It's unknown what went wrong on your side. See https://stackoverflow.com/help/how-to-ask – Estus Flask Aug 29 '21 at 16:30
  • 1
    question updated.please have a look @EstusFlask – radiorz Aug 30 '21 at 05:48
  • Did you figure it out? I am unable to build a multi-page app neither – m3.b Jul 25 '23 at 18:12

1 Answers1

6

There is a way that make it work just following the advice of vite and do some small changes in file structure.

what the vite told us: https://vitejs.dev/guide/build.html#multi-page-app

|-package.json
|-vite.config.js
|-index.html // which script is : <script src="/src/pages/main/main.js"></script>
|-admin
|--index.html // which script is : <script src="/src/pages/admin/main.js"></script>
|-src
|--...
|--pages/
|---main/
|----routes/
|----App.vue
|----main.js
|---admin/
|----routes/
|----App.vue
|----main.js

and the paths in vite.config.js would be like this:

// vite.config.js
const { resolve } = require('path')

module.exports = {
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        admin: resolve(__dirname, 'admin/index.html')
      }
    }
  }
}

But I think the best way is that put index.html into the pages folder.

radiorz
  • 1,459
  • 4
  • 18
  • 36