ViteJS技术咨询：main.js含HTML代码原因及优化方案问询

作为前端工具新手，刚接触Vite，疑惑为何main.js文件中包含HTML代码。这种将HTML放在模板字符串中的方式无法使用自动补全、语法高亮等功能，习惯使用独立的HTML文件（可多个）、CSS文件和JS文件的结构。请问：

1. 能否在不丢失功能的前提下重构文件结构？
2. 若不可行，是否应为每个页面单独创建.js文件？
3. 有没有办法让模板字符串中的HTML代码显示语法高亮，而非始终呈橙色？

肯定有比这更好的方式：

document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Dave!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`

注：此问题与《What is the purpose of the main.js file in a Vite js app》内容不同

1. 完全可以重构为独立文件结构，且不丢失原有功能 #

Vite默认的vanilla模板只是最基础的演示写法，你可以完全改成熟悉的多文件结构：

• 保留根目录的index.html：这是Vite的入口文件，把原来模板字符串里的HTML内容直接放到index.html的<div id="app"></div>内部即可。
• 拆分CSS：新建style.css文件，把样式写进去，然后在main.js里通过import './style.css'引入。
• 简化main.js：原来的DOM操作和交互逻辑留在main.js里，比如计数器功能，不需要再通过innerHTML插入HTML。

重构后的示例结构：

├── index.html
├── main.js
└── style.css

index.html内容示例：

<!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>Vite App</title>
  </head>
  <body>
    <div id="app">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" class="logo" alt="Vite logo" />
        </a>
        <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
          <img src="./javascript.svg" class="logo vanilla" alt="JavaScript logo" />
        </a>
        <h1>Hello Dave!</h1>
        <div class="card">
          <button id="counter" type="button"></button>
        </div>
        <p class="read-the-docs">
          Click on the Vite logo to learn more
        </p>
      </div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

main.js只保留逻辑：

import './style.css'
import javascriptLogo from './javascript.svg'

document.querySelector('#counter').addEventListener('click', () => {
  // 计数器逻辑
})

2. 多页面场景的处理 #

如果是多页面应用，不一定非要每个页面单独对应一个main.js（当然也可以这么做），Vite支持多页面配置：

• 在项目根目录创建pages文件夹，每个页面单独建子文件夹，包含各自的index.html和对应的JS/CSS文件。
• 修改vite.config.js（没有就新建），配置build.rollupOptions.input指定每个页面的入口HTML：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: './index.html',
        about: './pages/about/index.html'
      }
    }
  }
})

3. 模板字符串的HTML语法高亮解决 #

如果一定要保留模板字符串写法，可以通过编辑器插件实现语法高亮：

• VS Code用户：安装lit-html插件，然后在模板字符串前添加/*html*/注释标记，插件会自动识别并高亮HTML内容：

document.querySelector('#app').innerHTML = /*html*/`
  <div>
    <!-- HTML内容 -->
  </div>
`

• WebStorm/IDEA用户：选中模板字符串后按Alt+Enter，选择"Inject language or reference"并注入HTML即可。

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