问题:将 Vue 项目打包成单个 js 文件,可以嵌入到 Ghost 博文中

我在运行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,纱线 v1.22.17

解答

创建单个JS文件输出

要将 Vue CLI 配置为输出单个.js文件:

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

2. 使用configureWebpack.optimization.splitChunks=false禁用 Webpack 的分块。

// 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 中的使用

1. 在您的博客页面中,插入一个自定义 HTML 块。

2. 在 HTML 块中,添加一个div,其 ID 与应用程序原始源中src/main.js中的挂载点匹配(默认 ID 为"app")。

<div idu003d"app">Vue 应用加载...</div>

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

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

4. 我注意到应用程序的 Vue 图标和标题对齐不正确(可能是由于继承了 Ghost 样式),因此通过在重新居中它们的 HTML 块中添加<style>来进行补偿。

<风格>
/* 补偿覆盖应用程序对齐方式的 Ghost 样式 */
#应用程序 {
显示:弯曲;
弹性方向:列;
对齐项目:居中;
}
</style>

结果如下所示:

GitHub

鬼页