vite + vue 快速构建 html 页面（舒适编写html文件）

Mo_jon

474人浏览 · 2026-01-17 10:16:44

Mo_jon · 2026-01-17 10:16:44 发布

安装

1、安装 node
2、安装 vite、vue、prettier

npm i -D vite vue prettier

安装打包插件（可下载源码修改）

npm i -D vite-plugin-html-vue-ssr

插件开源地址：https://github.com/Mo-jon/vite-plugin-html-vue-ssr

配置 vite.config.js

import { htmlVueSsr } from "vite-plugin-html-vue-ssr";

export default {
  plugins: [
    htmlVueSsr({
      // 可选的 Vue 组件属性
    }),
  ],
};

在这里插入图片描述

html文件编写

<!doctype html>
<html lang="en">
  <HeadComponent title="index">
    <link rel="stylesheet" href="assets/css/index.css" />
  </HeadComponent>
  <body>
    <HeaderComponent></HeaderComponent>
    <MainComponent>
      <div class="container">
        <div class="flex justify-center">
          <h1 class="font-bold text-3xl title">index</h1>
        </div>
      </div>

      <div class="container">
        <ul class="flex flex-col gap-5 mt-10">
          <li v-for="item in [1,2,3,4,5,6]" class="text-2xl bg-blue-100 p-2">{{item}}</li>
        </ul>
      </div>
    </MainComponent>

    <FooterComponent>
      <script src="assets/js/index.js"></script>
    </FooterComponent>
  </body>
</html>