javascript - vite的多页面配置main的问题?

Question

export default defineConfig({  plugins: [ react()],  build: {    rollupOptions: {      input: {        main: path.resolve(__dirname, 'index.html'),        admin: path.resolve(__dirname, 'admin.html'),      },    },  },})

我这里配置了两个页面，访问http://localhost:3000开头的进入index.html，访问http://localhost:3000/admin开头的访问admin.html

现在我的index.html不在根目录，而是在aaa/index.html，然后我修改如下

export default defineConfig({  plugins: [ react()],  build: {    rollupOptions: {      input: {        main: path.resolve(__dirname, 'aaa/index.html'),        admin: path.resolve(__dirname, 'admin.html'),      },    },  },})

但是运行 yarn dev 之后，访问http://localhost:3000，提示找不到对应页面。多页面打包配置主页面，不是这样配置吗？

Answer 1

你看看打包出来的目录，打包出来应该多了一层目录了，而不是根目录。运行项目的时候只输入域名那些，会在根目录去寻找index.html的，所以你要在src下创建一个index.html文件用于重定向到你要默认指定的目录

Answer 2

你的配置文件中，input字段应该指向的是入口文件，而不是具体的HTML文件。Vite会根据这些入口文件生成对应的HTML文件。你应该将main和admin的输入改为你的React应用程序的入口文件路径。

如果你的index.html在aaa文件夹下，那么你的项目结构可能类似这样：

├── index.html└── aaa    └── index.html  // 你的React应用入口文件

在这种情况下，你应该将配置修改为以下内容：

export default defineConfig({  plugins: [ react()],  build: {    rollupOptions: {      input: {        main: path.resolve(__dirname, 'aaa/index.js'),  // 注意，这里应该是你的React应用的入口文件，如index.js        admin: path.resolve(__dirname, 'admin.js'),   // 同样，这里应该是你的admin页面的React应用的入口文件      },    },  },})

注意，这里的index.js或admin.js应该是你的React应用程序的入口文件，它们通常会导出React的根组件。Vite将使用这些入口文件生成对应的HTML文件。如果你的入口文件是index.jsx或admin.jsx，你需要在配置中相应地更改扩展名。