javascript - 将 Vue 项目打包成可以嵌入到 Ghost 博客文章中的单个 js 文件

Question

我在运行 yarn build 后构建了一个简单的 Vue.js 项目. dist文件夹包含如下文件；

我想将所有文件(HTML、js、CSS)捆绑到一个可以嵌入到 ghost 博客文章中的 js 文件中。
这是一个如何为幽灵博客文章完成此操作的示例。
https://blog.openbloc.com/including-a-js-app-in-a-ghost-post/
我的问题是如何将我的 Vue.js 项目文件捆绑到一个可以部署在 ghost 博客文章中的文件中？
webpack 是正确的工具吗？我对其他选择持开放态度。
我正在使用@vue/cli 5.0.1， yarn v1.22.17

Answer 1

创建单个 JS 文件输出
将 Vue CLI 配置为输出单个 .js文件:

使用 css.extract=false 禁用 CSS 提取.

使用 configureWebpack.optimization.splitChunks=false 禁用 Webpack 的 block 分割.

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  ⋮
  css: {
    extract: false, 1️⃣
  },
  configureWebpack: {
    optimization: {
      splitChunks: false, 2️⃣
    },
  },
})

然后构建生成 dist包含这些文件的目录:

dist/js/app.bd71ae48.js      # all app code, including template, scripts, and styles
dist/js/app.bd71ae48.js.map  # source map for development (optional)
dist/favicon.ico             # favicon shown in browser   (optional)
dist/index.html              # initial index              (optional)

在 Ghost 中的使用

在您的博客页面中，插入 custom HTML block .

在 HTML block 中，添加 div ID 与 src/main.js 中的安装点匹配来自您应用的原始来源(默认 ID 为 "app" )。

<div id="app">Vue app loading...</div>

添加 <script>拉入app.js之前建立的文件。例如，如果您将脚本托管在 GitHub 上，则可以使用如下 CDN 链接:

<script src="https://cdn.jsdelivr.net/gh/tony19-sandbox/vue-cli-single-js-file@master/dist/js/app.bd71ae48.js"></script>

我注意到应用程序的 Vue 图标和标题对齐不正确(可能是由于继承了 Ghost 样式)，所以通过添加 <style> 进行补偿到使它们重新居中的 HTML block 。

<style>
/* compensate for Ghost styles overriding the app's alignment */
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

结果如下所示:

GitHub
Ghost page