如何将Vue项目打包为可嵌入Blogger的单HTML文件

方法一：用Vue CLI插件快速实现 #

• 安装单文件打包插件

yarn add vue-cli-plugin-singlefile --dev

• 执行打包命令

yarn build

打包完成后，dist目录下的index.html就是包含所有JS、CSS资源的单个文件，直接复制到Blogger帖子的HTML视图即可。

方法二：手动配置Webpack（适配自定义需求） #

• 安装依赖插件

yarn add html-webpack-inline-source-plugin --dev

• 修改项目根目录的vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].inlineSource = '.(js|css)$'
      return args
    })
  },
  configureWebpack: {
    plugins: [new HtmlWebpackInlineSourcePlugin()]
  }
})

• 执行打包命令

yarn build

部署到Blogger的注意事项 #

• 打开Blogger帖子编辑器，切换到HTML视图，粘贴打包好的index.html全部内容
• 若项目中有图片等外部资源，需将其转为Base64格式内联到HTML，或上传至图床替换为在线URL，避免资源加载失败
• 确保Vue项目的挂载元素（如默认的#app）在Blogger帖子中存在，可手动添加<div id="app"></div>到帖子HTML中
• 若打包后内容过大，可检查是否开启了代码压缩（Vue CLI默认已开启），或移除不必要的依赖减少体积

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