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

Question

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

发布于
2023-09-22 北京

更新于
2023-09-22

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，提示找不到对应页面。多页面打包配置主页面，不是这样配置吗？

前端 javascript typescript vue.js vite

阅读 861

AI BotBETA

你的配置文件中，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，你需要在配置中相应地更改扩展名。

1 个回答

得票最新

一柯白菜

164

发布于
2023-09-22 广东

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

查看全部 1 个回答

推荐问题