我想将所有 Vue.js 项目文件(HTML、js、CSS)捆绑到一个 HTML 文件中，以便可以将其部署在博客博客帖子中。
过去有人向 Ghost 博客提出过类似的问题，但它是关于将文件捆绑到单个 js 文件中。
Bundle Vue project into single js file that can be embedded in Ghost blog post
我正在使用@vue/cli 5.0.1，yarn v1.22.21
最佳答案
要生成嵌入 JS、CSS、图像的单个 HTML 文件，您可以使用 HTML Bundler Plugin for Webpack 。该插件可以将资源内联到 HTML 中。
例如，有一个简单的 Vue 应用程序，包括 SCSS、TS 和图像文件:
index.html
<!doctype html>
<html lang="en">
<head>
<!-- source icon file -->
<link href="./favicon.ico" rel="icon" />
<!-- source style file -->
<link href="./main.scss" rel="stylesheet" />
<title>Vue</title>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<!-- source image file -->
<img src="./picture.png" />
<my-button></my-button>
</div>
<!-- source TS file -->
<script src="./index.ts"></script>
</body>
</html>
index.ts
import { createApp, ref } from 'vue';
import MyButton from './MyButton.vue';
import './styles.scss';
createApp({
setup() {
return {
title: ref('Hello Vue!'),
};
},
})
.component('my-button', MyButton)
.mount('#app');
MyButton.vue
<template>
<button>{{ text }}</button>
</template>
<script setup>
import { ref } from 'vue';
const text = ref('Button');
</script>
<!-- source style file -->
<style src="./MyButton.scss" lang="scss"></style>
简单的 Webpack 配置:
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
mode: 'production',
output: {
path: path.join(__dirname, 'dist/'),
},
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler',
},
extensions: ['.ts', '...'],
},
plugins: [
new VueLoaderPlugin(),
new HtmlBundlerPlugin({
entry: {
// define HTML templates here
index: './src/views/index.html', // => dist/index.html
},
js: {
// output JS filename, used only if the `inline` option is false
filename: '[name].[contenthash:8].js',
inline: true, // inline JS into HTML
},
css: {
// output CSS filename, used only if the `inline` option is false
filename: '[name].[contenthash:8].css',
inline: true, // inline CSS into HTML
},
minify: 'auto', // minify html in production mode only
}),
],
module: {
rules: [
{
test: /\.vue$/i,
use: ['vue-loader'],
},
{
test: /\.(css|scss)$/,
use: ['css-loader', 'sass-loader'],
},
{
test: /\.(ico|png|jp?g|svg)$/,
type: 'asset/inline', // inline all images into HTML/CSS
},
],
},
};
生成的 HTML 文件 dist/index.html 将如下所示:
<!doctype html><html lang="en"><head><meta charset="UTF-8"/>
<link href="data:image/vnd.microsoft.icon;base64,iVBORw0KGg..." rel="icon"/>
<style>...embedded CSS...</style><title>Vue</title></head>
<body><div id="app"><h1>{{ title }}</h1>
<img src="data:image/png;base64,iVBORw0KGgoA..."/><my-button></my-button></div>
<script>...embedded JS...</script></body></html>
编译后的 CSS、JS 和图像将内联到生成的 HTML 中。
View the working example in browser在 StackBlitz 上
View complete source code在 GitHub 上
关于javascript - 将 Vue 项目捆绑到单个 html 文件中，该文件可以嵌入到 Blogger 博客帖子中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/77509127/