如何将 Vue 项目打包为单个 HTML 文件并嵌入 Blogger 博客文章-js教程-PHP中文网

如何将 Vue 项目打包为单个 HTML 文件并嵌入 Blogger 博客文章

本文介绍使用 html-bundler-webpack-plugin 将 vue cli 5 项目（含 html、js、css、图片等）完整内联打包为单个可直接嵌入 blogger 的 html 文件，无需外部资源依赖。

本文介绍使用 html-bundler-webpack-plugin 将 vue cli 5 项目（含 html、js、css、图片等）完整内联打包为单个可直接嵌入 blogger 的 html 文件，无需外部资源依赖。

在 Blogger（Blogspot）中嵌入交互式 Vue 应用时，无法部署独立的构建目录（如 /dist/js/app.js），仅支持通过 <script></script> 或 <style></style> 标签直接插入 HTML 片段。因此，必须将整个 Vue 应用——包括模板、逻辑、样式和静态资源（如图标、图片）——全部内联（inline）进一个 HTML 文件中。传统 vue-cli-service build 默认生成多文件结构，不满足此需求；而 html-bundler-webpack-plugin 正是为此场景设计的专业解决方案。

✅ 核心配置要点

该插件通过 Webpack 拦截所有资源引用（.js, .css, .scss, .png, .ico 等），将其自动转为 Data URL（Base64）或内联代码，并注入到最终 HTML 中。关键配置如下：

js.inline: true → 将入口 JS 打包后直接写入 <script></script> 标签；
css.inline: true → 将所有 CSS/SCSS 编译后写入 <style></style> 标签；
type: 'asset/inline' → 对图片、图标等静态资源启用 Base64 内联；
resolve.alias.vue → 显式指向 vue/dist/vue.esm-bundler，确保运行时不依赖全局 Vue 实例（适配 Blogger 环境）；
移除 html-webpack-plugin，由 HtmlBundlerPlugin 全权接管 HTML 构建流程。

? 示例 webpack.config.js（适配 Vue CLI 5）

// vue.config.js（注意：需禁用默认构建，改用自定义 Webpack 配置）
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {}, // 不设 entry —— 由 HtmlBundlerPlugin 管理
  output: {
    path: path.join(__dirname, 'dist/'),
    clean: true,
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler', // 必须！避免 runtime-only 错误
    },
    extensions: ['.ts', '.js', '.vue', '.scss'],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlBundlerPlugin({
      entry: {
        index: './src/index.html', // 主 HTML 入口（含 <script src="./main.ts">）
      },
      js: { inline: true },
      css: { inline: true },
      minify: 'auto',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.vue$/i,
        use: ['vue-loader'],
      },
      {
        test: /\.(css|scss|sass)$/i,
        use: ['css-loader', 'sass-loader'],
      },
      {
        test: /\.(ico|png|jpe?g|gif|svg)$/i,
        type: 'asset/inline', // 所有图片/图标转 data-url
      },
      {
        test: /\.ts$/i,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};</script>

? 提示：在 vue.config.js 中返回上述配置，并确保已安装对应 loader（npm install -D vue-loader css-loader sass-loader ts-loader html-bundler-webpack-plugin）。

html-ppt-to-pdf
将使用 `
` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

? 输出效果（`dist/index.html` 片段）



  <meta charset="UTF-8"><link rel="icon" href="data:image/vnd.microsoft.icon;base64,iVBORw0KGgo..."><style>/* 编译后的 SCSS，含 PostCSS 处理 */ h1{color:#333} .button{padding:8px}</style><title>My Vue Widget</title><div id="app">
    <h1>{{ title }}</h1>
    @@##@@
    <my-button></my-button>
</div>
  <script>
    // 完整编译后的 ES Module 代码（含 Vue、组件、逻辑），已 Tree-shaking
    import { createApp, ref } from 'vue';
    const app = createApp({ setup() { return { title: ref('Hello Blogger!') }; } });
    app.component('my-button', { template: '<button>Click Me' });
    app.mount('#app');
  </script>

⚠️ 注意事项与最佳实践

Blogger 安全限制：Blogger 会过滤部分 <script></script> 标签（尤其含 document.write 或 eval）。确保 Vue 构建产物不含动态执行代码；建议使用 runtimeCompiler: false（默认）+ defineComponent + <script setup></script> 以提升兼容性。
Vue 版本对齐：@vue/cli 5 默认使用 Vue 3，务必确认 vue/dist/vue.esm-bundler 可用；若使用 Composition API，需在 tsconfig.json 中启用 "moduleResolution": "bundler"。
字体与外部资源：Google Fonts 等 CDN 字体需手动内联 @import 或预下载为本地 .woff2 并 asset/inline；禁止使用 @import url(...) 远程链接。
调试技巧：开发阶段可临时关闭 minify 和 inline，验证资源路径是否正确；上线前务必开启 inline: true 并检查 dist/index.html 是否无任何 src= 或 href= 外链。
部署方式：复制 dist/index.html 全文（Ctrl+A → Ctrl+C），粘贴至 Blogger 编辑器的「HTML 视图」中即可——无需上传任何文件。