我想將所有檔案（HTML、js、CSS）捆綁到一個可以嵌入到 ghost 博客文章中的 js 檔案中。
這是一個如何為幽靈博客文章完成此操作的示例。
https://blog.openbloc.com/include-a-js-app-in-a-ghost-post/
我的問題是如何將我的 Vue.js 專案檔案捆綁到一個可以部署在 ghost 博客文章中的檔案中？
webpack 是正確的工具嗎？我對其他選擇持開放態度。
我正在使用@vue/cli 5.0.1，紗線 v1.22.17
uj5u.com熱心網友回復：
創建單個 JS 檔案輸出
要將 Vue CLI 配置為輸出單個.js檔案：
- 使用 禁用 CSS 提取
css.extract=false。 - 使用 .禁用 Webpack 的塊分割
configureWebpack.optimization.splitChunks=false。
// 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 中的使用
- 在您的博客頁面中，插入自定義 HTML 塊。
在 HTML 塊中，添加一個ID，該 ID 與您應用的原始源
div中的安裝點相匹配（默認 ID 為）。src/main.js"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 塊中添加一個重新居中它們來進行補償。<style> /* compensate for Ghost styles overriding the app's alignment */ #app { display: flex; flex-direction: column; align-items: center; } </style>
結果如下所示：
GitHub
幽靈頁面
uj5u.com熱心網友回復：
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/434820.html
標籤：javascript Vue.js 网页包 鬼博客