将 Vue 项目捆绑到单个 js 文件中，该文件可以嵌入 Ghost 博客文章中

Question

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

我想将所有文件（HTML、js、CSS）捆绑到一个 js 文件中，该文件可以嵌入到幽灵博客文章中。

以下是如何为幽灵博客文章完成此操作的示例。

https://blog.openbloc.com/include-a-js-app-in-a-ghost-post/

我的问题是如何将我的 Vue.js 项目文件捆绑到可以部署在 Ghost 博客文章中的单个文件中？

webpack 是正确的工具吗？我对其他选择持开放态度。

我正在使用 @vue/cli 5.0.1，yarn v1.22.17

Answer 1

创建单个 JS 文件输出

\n

配置 Vue CLI 以输出单个.js文件：

\n

\n
1. 使用 禁用 CSS 提取css.extract=false。
\n
2. 使用 禁用 Webpack 的块分割configureWebpack.optimization.splitChunks=false。
\n

\n

// vue.config.js\nconst { defineConfig } = require(\'@vue/cli-service\')\nmodule.exports = defineConfig({\n  \xe2\x8b\xae\n  css: {\n    extract: false, 1\xef\xb8\x8f\xe2\x83\xa3\n  },\n  configureWebpack: {\n    optimization: {\n      splitChunks: false, 2\xef\xb8\x8f\xe2\x83\xa3\n    },\n  },\n})\n

\n

然后构建会生成一个dist包含这些文件的目录：

\n

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

\n

Ghost 中的用法

\n

\n
1. 在您的博客页面中，插入自定义 HTML 块。
\n

\n\n

\n

2. 在 HTML 块中，添加 ，其 ID 与应用程序原始源中的div安装点相匹配（默认 ID 为）。src/main.js"app"

   \n

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

   \n
\n

3. 添加一个<script>提取app.js先前构建的文件的文件。例如，如果您已在 GitHub 上托管脚本，则可以使用如下 CDN 链接：

   \n

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

   \n
\n

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

   \n

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

   \n
\n

\n

结果如下：

\n\n

GitHub

\n

幽灵页面

\n