From eeb9bf8193a5627cd37f8e14decdba170008769d Mon Sep 17 00:00:00 2001
From: sunnylost <sunnylost@gmail.com>
Date: Sat, 31 Aug 2024 18:06:55 +0800
Subject: [PATCH] fix(html): rewrite assets url in <template>

---
 packages/vite/src/node/plugins/html.ts     | 3 +++
 playground/assets/__tests__/assets.spec.ts | 7 +++++++
 playground/assets/index.html               | 5 +++++
 3 files changed, 15 insertions(+)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index e4b87807ac1cb6..f451a83833abd0 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -173,6 +173,9 @@ function traverseNodes(
   node: DefaultTreeAdapterMap['node'],
   visitor: (node: DefaultTreeAdapterMap['node']) => void,
 ) {
+  if (node.nodeName === 'template') {
+    node = (node as DefaultTreeAdapterMap['template']).content
+  }
   visitor(node)
   if (
     nodeIsElement(node) ||
diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index f6ad1ed750c7f5..6e5578ce536e49 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -576,3 +576,10 @@ test.runIf(isBuild)('assets inside <noscript> is rewrote', async () => {
     /<img class="noscript" src="\/foo\/bar\/assets\/asset-[-\w]+\.png" \/>/,
   )
 })
+
+test.runIf(isBuild)('assets inside <template> is rewrote', async () => {
+  const indexHtml = readFile('./dist/foo/index.html')
+  expect(indexHtml).toMatch(
+    /<img class="template" src="\/foo\/bar\/assets\/asset-[-\w]+\.png" \/>/,
+  )
+})
diff --git a/playground/assets/index.html b/playground/assets/index.html
index dbb482229296c7..3108c3ce616fbb 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -409,6 +409,11 @@ <h3>assets in noscript</h3>
   <img class="noscript" src="./nested/asset.png" />
 </noscript>
 
+<h3>assets in template</h3>
+<template>
+  <img class="template" src="./nested/asset.png" />
+</template>
+
 <link rel="stylesheet" href="asset/style.css" />
 <div class="relative-css">link style</div>
 <div class="relative-js"></div>