將 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 文件 output

要將 Vue CLI 配置為 output 單個.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 id="app">Vue app loading...</div>

3. 添加一個<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>

4. 我注意到該應用程序的 Vue 圖標和標題未正確對齊（可能是由於繼承的 Ghost 樣式），因此通過將<style>添加到 HTML 塊來重新居中進行補償。

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

結果如下所示：

GitHub

幽靈頁面

Answer 2

vue cli 有一個命令： https://cli.vuejs.org/guide/build-targets.html#library

您需要將此命令--target lib傳遞給vue-cli-service build 。 這意味着您只需要一個最終文件。

此外，您還可以傳遞其他屬性，例如：

• --inline-vue ，將根據您的用例將 Vue 包含在您的包中，這是推薦的；
• --name ，你的包文件名；
• 在命令的末尾，你的應用程序的入口點，默認情況下是src/Vue.js ，但也可以是main.js ，例如。 您必須根據您構建應用程序的方式進行測試；

因此，您可以嘗試以下組合之一：

vue-cli-service build --target lib
vue-cli-service build --target lib --inline-vue
vue-cli-service build --target lib --inline-vue --name myApp
vue-cli-service build --target lib --inline-vue --name myApp src/main.js