Vite中createHtmlPlugin无法生成script-tags.liquid文件问题排查

问题分析 #

你遇到的核心问题是vite-plugin-html未按预期生成script-tags.liquid文件，主要原因有两点：

1. 该插件默认关联Vite的HTML入口文件，但你的rollupOptions.input中未包含script-tags.html，插件无法识别需要处理这个模板。
2. 直接给filename设置绝对路径会和Vite的build.outDir输出逻辑冲突，插件不会将文件输出到指定的外部目录。

解决方案 #

方案1：调整vite-plugin-html配置，适配Vite输出逻辑

1. 添加模板入口到Rollup配置
   在build.rollupOptions.input中加入script-tags.html的路径，让插件识别这个模板对应的入口：

   rollupOptions: {
     input: {
       ...getLayoutEntrypoints(settings),
       ...getTemplateEntrypoints(settings),
       'script-tags': path.resolve(__dirname, 'lib', 'script-tags.html') // 新增这一行
     },
     // ...其他output配置
   },
   

2. 修正filename路径为相对路径
   由于你的build.outDir是settings.theme.dist.assets，需要将filename设置为相对于该目录的路径，确保文件输出到dist/snippets：

   createHtmlPlugin({
     entry: path.resolve(__dirname, 'lib', 'script-tags.html'), // 指定对应入口
     filename: path.relative(settings.theme.dist.assets, path.resolve(settings.theme.dist.snippets, 'script-tags.liquid')),
     template: path.resolve(__dirname, 'lib', 'script-tags.html'),
     inject: {
       data: {
         liquidTemplates: getTemplateEntrypoints(settings),
         liquidLayouts: getLayoutEntrypoints(settings),
       },
     },
   }),
   

方案2：自定义Vite插件实现模板渲染（更可控）

如果vite-plugin-html的限制较多，可以直接写一个轻量插件，在构建完成后手动渲染EJS模板并生成liquid文件：

1. 先确保安装了ejs：npm install ejs --save-dev
2. 在vite.config.js中添加自定义插件：

   // 自定义模板渲染插件
   const renderLiquidTemplate = () => {
     const ejs = require('ejs');
     const fs = require('fs');
     const path = require('path');
   
     return {
       name: 'render-liquid-template',
       closeBundle() { // 构建完成后执行
         const templatePath = path.resolve(__dirname, 'lib', 'script-tags.html');
         const outputPath = path.resolve(settings.theme.dist.snippets, 'script-tags.liquid');
         const templateContent = fs.readFileSync(templatePath, 'utf-8');
         
         // 渲染EJS模板
         const renderedContent = ejs.render(templateContent, {
           liquidTemplates: getTemplateEntrypoints(settings),
           liquidLayouts: getLayoutEntrypoints(settings),
         });
   
         // 确保输出目录存在
         fs.mkdirSync(path.dirname(outputPath), { recursive: true });
         // 写入文件
         fs.writeFileSync(outputPath, renderedContent);
       }
     }
   }
   
   // 在plugins数组中加入该插件
   plugins: [
     vue(),
     // ...其他插件（如vite-plugin-copy）
     renderLiquidTemplate() // 新增这一行
   ],
   

额外检查点 #

• 打印settings.theme.dist.snippets路径，确认是否正确指向dist/snippets：

  console.log('Snippets output path:', settings.theme.dist.snippets);
  

• 升级vite-plugin-html到最新版本，避免旧版本对非HTML后缀文件的支持问题：

  npm update vite-plugin-html
  

内容的提问来源于stack exchange，提问作者user3903098