IndexXuan/vite-plugin-html-template

template always use index.html

Megrax opened this issue · 23 comments

Megrax commented

I am using this plugin together with vite-plugin-mpa, and I've made the following configuration:

// vite.config.js
plugins: [
    htmlTemplate({
      pages: {
        somePage: {
          somePage: './public/app.html',  // I want it to use 'app.html'
          title: 'somePage',
        },
      },
    }),
    mpa({
      open: '/somePage',
      scanDir: 'src/somePage/',
      scanFile: 'index.ts',
      filename: 'app.html',
    }),
]

And this is my public directory:

public
  -- app.html
  -- index.html

But my project used public/index.html for build, rather then using public/app.html.
Why would this happen, and how could I fix it ?

github-actions commented

Thanks feedback. We will check it later:-)

IndexXuan commented

https://github.com/IndexXuan/vite-plugin-html-template/blob/main/src/index.ts#L45

It is use public/index.html by default and you can customize it. what wrong ? can you give repro demo ?

IndexXuan commented

image
it should template: './public/app.html' not somePage: './public/app.html'

and you said you want app.html but you also said want index.html.

Megrax commented

it should template: './public/app.html' not somePage: './public/app.html'

Sorry, that's a typo in this issue, it is template: './public/app.html' what I am using in the code.

// vite.config.js
plugins: [
    htmlTemplate({
      pages: {
        somePage: {
          template: './public/app.html',  // I want it to use 'app.html'
          title: 'somePage',
        },
      },
    }),
    mpa({
      open: '/somePage',
      scanDir: 'src/somePage/',
      scanFile: 'index.ts',
      filename: 'app.html',
    }),
]

and you said you want app.html but you also said want index.html.

I expect it to use app.html , not index.html, but what actually is used is index.html :(

IndexXuan commented

I know, it is wrong pageName. this plugin now only match by src/pages.
https://github.com/IndexXuan/vite-plugin-html-template/blob/main/src/index.ts#L42
I will fixed it.

Megrax commented

Thanks 👍🏾

IndexXuan commented

@Megrax It is recommended to use src/pages for MPA, it is common case.
Support your case will not very soon.

Megrax commented

Alright, but it's not appropriate for me to change the structure at this moment.
I would consider another way.
Thank you.

IndexXuan commented

I will try it today. hope not very hard.

  • ❤️1
IndexXuan commented

any feedback ?

Megrax commented

You may close this issue for now. If there's any problem I'd open another one.
Thanks!🤩

IndexXuan commented

额，到底解决了么 ...

Megrax commented

还没有...不过我需要先理清到底是我的问题还是这个插件的问题😂到时候给你反馈

hex-ci commented

我也有这个问题，就是说我想在浏览器里访问 example.com/app.html 而不是 example.com/src/pages/app/index.html，我看了一下代码，我觉得改进一下如何确定 pageName 就可以，或者支持函数，让用户自己决定如何从 path 中提取 pageName。

IndexXuan commented

@hex-ci 你需要的是 vite-plugin-mpa，来拥有 vue-cli 一样的 MPA 构建和 path 处理。也是我写的插件，定位不同。
vite 默认就是文件路径是啥就访问啥，src/pages/app/index.html 很正常，但是 vite-plugin-mpa 做了抹平

hex-ci commented

@IndexXuan 你的意思我理解，不过 html-template 插件实现的效果并不是浏览器实际访问的文件，实际上也是虚拟的 HTML 文件，那既然是虚拟的，那这个虚拟文件具体是什么 URL 就应该是可以定制的。我是这么考虑的。

hex-ci commented

或者说我需要用 mpa 插件加 html-template 组合起来实现我的需求？

IndexXuan commented

@hex-ci 你看这个项目 examples 都是组合起来用的，为啥不二合一

  1. mpa 插件只做 mpa 的事情，即自动根据文件目录结构计算出配置传给 vite，和 vue-cli 一样的体验，解决 dev 时候的 path 简化和构建后 dist 目录的简化
  2. html-template 插件只做 template 工作，因为 vite 特色就是需要实体 index.html 或 src/pages/app/index.html，只解决这个单一问题。

所以想彻底拥有 vue-cli mpa 体验，两个都用，一起配合用。

hex-ci commented

了解，谢谢，我试试。

hex-ci commented

基于之前的讨论和我的需求，我基于 vite-plugin-html-template 做了一个插件来实现灵活的 URL 映射到某个模板文件上： https://github.com/hex-ci/vite-plugin-virtual-html-template

项目使用了作者的部分代码，并已在 README 中说明，感谢 @IndexXuan 开发了这么好的的项目~

  • 👍1
IndexXuan commented

@hex-ci

好滴 ~ 没问题。 给我插件加个链接啊，哥。
我还是坚持一个插件做一个事情，html 仅做 vite 不做的 html 模板，mpa 仅做 mpa 路径映射，哈哈。

基于之前的讨论和我的需求，我基于 vite-plugin-html-template 做了一个插件来实现灵活的 URL 映射到某个模板文件上： https://github.com/hex-ci/vite-plugin-virtual-html-template

项目使用了作者的部分代码，并已在 README 中说明，感谢 @IndexXuan 开发了这么好的的项目~

hex-ci commented

@IndexXuan 哈哈，没问题。主要是，我用你的这两个插件，好像是无法实现我的需求，所以才自己搞了一个，也许我的需求很奇葩吧。。。。

  • ❤️2