From 413c86aa971bc1ad8958578c929f45a368799f74 Mon Sep 17 00:00:00 2001
From: sunnylost <sunnylost@gmail.com>
Date: Tue, 3 Sep 2024 04:37:55 +0800
Subject: [PATCH] fix(html): rewrite assets url in <template> (#17988)

---
 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 ac5454229dde8e..5f2f6af6082763 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -588,3 +588,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 6438c11b983509..cf79dab2830275 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -413,6 +413,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>