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

【问题标题】：How to create multi pages with vite following this directory structure?如何按照这个目录结构使用 vite 创建多页？
【发布时间】：2021-10-28 13:15:27
【问题描述】：

这是我的文件树：

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

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

How to build a multi pages application by vite2 and vue3？

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

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

// 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')
      }
    }
  }
}

【问题讨论】：

什么不起作用？这些文件的内容是什么？该问题缺乏明确的问题陈述和stackoverflow.com/help/mcve
我可以通过 localhost:3000 正确访问该页面。 @EstusFlask，
无法以当前形式回答问题。 “不起作用”不是问题陈述。不知道你那边出了什么问题。见stackoverflow.com/help/how-to-ask
问题已更新。请看@EstusFlask

标签： vue.js vite

【解决方案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 中的路径是这样的：

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

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

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

【讨论】：