Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Customize the path or method for the vite dev server to locate index.html. #18984

Open
4 tasks done
ilxqx opened this issue Dec 17, 2024 · 0 comments
Open
4 tasks done

Customize the path or method for the vite dev server to locate index.html. #18984

ilxqx opened this issue Dec 17, 2024 · 0 comments
Labels
enhancement: pending triage

Comments

@ilxqx
Copy link

ilxqx commented Dec 17, 2024

Description

First, let me introduce the use case scenario. Vite is already powerful enough, but for our company's development, many project configurations are quite similar. I don't want to make the same basic configurations for every project, as that would make maintenance and updates extremely difficult later on. So I had a bold idea: I want to encapsulate most of the agreed-upon Vite configurations (including index.html) through a library project, so that new projects only need to reference this library and can quickly start and develop with minimal or even no configuration.

Everything went very smoothly, except for one point that got stuck, which is the handling of index.html. In fact, the build process is fine; it's just that the dev server of Vite has some trouble finding index.html after running pnpm serve. Below is my simplified configuration, which can reproduce the issue:

const virtualModuleId = "index.html";
defineConfig({
  appType: "spa",
  plugins: [
   // other plugins...
    {
      name: "vite-plugin-framework-html",
      resolveId(source) {
        if (source === virtualModuleId) {
          return virtualModuleId;
        }
      },
      load(id) {
        if (id === virtualModuleId) {
          return `
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>title</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="src/main.tsx"></script>
  </body>
</html>
`;
        }
      },
    },
  ],
  build: {
          outDir: "dist",
          rollupOptions: {
            input: {
              main: "index.html",
            },
          },
        },
})

Actually, what I hope here is that the dev server of Vite can also find the index.html content returned from the virtual module. I have tried Vite's middleware, but it doesn't solve this problem.

Suggested solution

I think the process of searching for index.html can also be compatible with looking for it from virtual modules, rather than just searching directly from the file system.

Alternative

No response

Additional context

No response

Validations
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement: pending triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ilxqx