How to create multi pages with vite following this directory structure?

user_14629776 0
Viewed 2297

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')
      }
    }
  }
}
vite vue.js
1 Answers

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.

user_146297760
Related