Golang Templ项目中如何集成Vite生成的index.html作为基础布局

完全可以实现你的需求，不需要依赖html/template，而是通过Templ的组件系统结合Vite的资源管理机制来完成集成，以下是具体实现步骤：

1. 调整Vite配置，适配Go项目的资源路径 #

首先修改vite.config.ts，确保构建输出和资源映射符合Go项目的结构：

import { defineConfig } from 'vite';

export default defineConfig({
  // 开发环境用根路径，生产环境根据部署路径调整
  base: process.env.NODE_ENV === 'production' ? './' : '/',
  build: {
    // 将Vite构建产物输出到Go项目的静态资源目录
    outDir: '../dist/static',
    // 生成manifest.json，用于生产环境准确获取哈希后的资源文件名
    manifest: true,
  },
});

2. 将Vite的基础页面转为Templ布局组件 #

创建layout.templ文件，用Templ的插槽（Component参数）替代原index.html中的{{ define "content" }}，同时区分开发/生产环境的资源加载：

package templates

templ Layout(pageTitle string, pageContent templ.Component) {
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <link rel="icon" type="image/svg+xml" href="/vite.svg" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>{ pageTitle }</title>
      // 开发环境直接加载Vite Dev Server的资源，支持热更新
      { if isDev() }
        <script type="module" src="http://localhost:5173/@vite/client"></script>
        <script type="module" src="http://localhost:5173/src/main.ts"></script>
      { else }
        // 生产环境从manifest读取哈希后的资源路径
        <script type="module" crossorigin src="/static/assets/{ getAssetPath('index.js') }"></script>
        <link rel="stylesheet" crossorigin href="/static/assets/{ getAssetPath('index.css') }">
      { end }
    </head>
    <body class="bg-slate-150 text-yellow-600">
      { pageContent }
    </body>
  </html>
}

3. 实现辅助函数处理Vite资源映射 #

在Go代码中添加工具函数，用于读取Vite生成的manifest文件和判断环境：

package templates

import (
  "encoding/json"
  "os"
  "path/filepath"
)

type viteManifest struct {
  Files map[string]struct {
    File string `json:"file"`
  } `json:"files"`
}

var manifest viteManifest

func init() {
  if !isDev() {
    manifestPath := filepath.Join("dist", "static", "manifest.json")
    data, err := os.ReadFile(manifestPath)
    if err != nil {
      panic(err)
    }
    json.Unmarshal(data, &manifest)
  }
}

// 判断是否为开发环境
func isDev() bool {
  return os.Getenv("GO_ENV") == "development"
}

// 根据入口文件名获取生产环境的资源路径
func getAssetPath(entry string) string {
  if isDev() {
    return entry
  }
  return manifest.Files[entry].File
}

4. 优化Tailwind配置 #

保留你现有配置的基础上，扩大Templ文件的扫描范围，确保所有组件的Tailwind类都能被识别：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "../internal/templates/**/*.templ"],
  theme: {
    extend: {},
  },
  plugins: [],
};

5. 开发与生产流程 #

• 开发阶段：
  1. 启动Vite Dev Server：npm run dev
  2. 设置环境变量GO_ENV=development，启动Go服务，此时Templ组件会直接加载Vite的热更新资源
• 生产阶段：
  1. 执行Vite构建：npm run build，生成静态资源和manifest文件到dist/static
  2. 编译Templ组件：templ generate
  3. 设置环境变量GO_ENV=production，启动Go服务，通过manifest加载哈希后的生产资源

关于templ.ReadFile的说明 #

templ.ReadFile主要用于读取静态文件内容直接渲染，并不适合用来集成Vite的动态资源体系。我们采用的组件插槽+环境判断方案，更贴合Templ的类型安全组件模型，也能完美兼容Vite的依赖管理、TS校验和Tailwind功能。

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