vite-plugin-html icon indicating copy to clipboard operation
vite-plugin-html copied to clipboard

多入口的路由规则是怎样的

Open konpeki622 opened this issue 2 years ago • 1 comments

Vue3+Vite,按照readme配置了index.htmlapp.html两个入口之后,访问localhost:3000/app.html依然显示index.html的内容,所以应该如何访问多个入口?

konpeki622 avatar Mar 26 '22 10:03 konpeki622

发现是我的配置错误,修改后可以正常访问。不过发现以下两个问题: 修改mpa目录中的vite.config.js为如下,并将index.html和other.html移动到src目录

createHtmlPlugin({
      minify: true,
      pages: [
        {
          entry: 'src/main.ts',
          filename: 'index.html',
          template: 'src/index.html',
          injectOptions: {
            data: {
              title: 'index',
              injectScript: `<script src="./inject.js"></script>`,
            },
            tags: [
              {
                injectTo: 'body-prepend',
                tag: 'div',
                attrs: {
                  id: 'tag1',
                },
              },
            ],
          },
        },
        {
          entry: 'src/other-main.ts',
          filename: 'other.html',
          template: 'src/other.html',
          injectOptions: {
            data: {
              title: 'other page',
              injectScript: `<script src="./inject.js"></script>`,
            },
            tags: [
              {
                injectTo: 'body-prepend',
                tag: 'div',
                attrs: {
                  id: 'tag2',
                },
              },
            ],
          },
        },
      ],
    }),
  1. 必须创建filename路径指定的文件,否则无法访问
  2. template与filename不一致时,injectOptions失效

konpeki622 avatar Mar 28 '22 08:03 konpeki622