如何按照这个目录结构用vite创建多个页面？

Question

这是我的文件树：

\n

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

\n

我们知道我们可以通过这种方式创建多页面：

\n

\n
• 如何通过vite2和vue3\xef\xbc\x9f构建多页面应用程序
\n

\n

但是如果我尝试更改文件的结构，则在运行脚本时无法通过 localhost:3000 访问 index.html 页面或通过 url (localhost:3000/admin/index.html) 访问pages/admin/index.html (维特）。

\n

其实我只是想把文件放在一起，所以我改变了vite.config.js中的文件结构和路径，结果页面没有出来。

\n

// vite.config.js\nconst { resolve } = require(\'path\')\n\nmodule.exports = {\n  build: {\n    rollupOptions: {\n      input: {\n        main: resolve(__dirname, \'pages/main/index.html\'),\n        admin: resolve(__dirname, \'pages/admin/index.html\')\n      }\n    }\n  }\n}\n

\n

Answer 1

有一种方法可以让它工作，只需遵循 vite 的建议并对文件结构进行一些小的更改。

vite 告诉我们的内容： 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

vite.config.js 中的路径如下所示：

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

但我认为最好的方法是将index.html放入pages文件夹中。