Vue CLI - 将构建输出合并到单个 html 文件中 [英] Vue CLI - combine build output to a single html file
问题描述
我有一个用 vue-cli 创建的 vue 项目.运行 yarn build 时的正常输出是一个带有 index.html 的 dist 文件夹和一个 js 和 css 子目录，其中包含相应的 .js 和 .css 文件.>
我希望构建输出是一个包含 js 和 css 的 html 文件.
I have a vue project created with vue-cli. The normal output when running yarn build is a dist folder with an index.html and a js and css sub-directory with the corresponding .js and .css files.
我在我的项目的根目录中添加了一个 vue.config.js 文件，并将其设置为输出单个 js 文件，并且工作正常.但我只想有一个 html 文件，其中包含 js 和 html 文件中已有的任何 css.
I want the build output to be a single html file that contains the js and css.
I added a vue.config.js file in the root of my project and set it to output a single js file and that is working ok. But I want to only have a single html file with the js and any css already on the html file.基本上我希望我的 html 文件是这样的:
module.exports = {
css: {
extract: false,
},
configureWebpack: {
optimization: {
splitChunks: false
}
}
}
Basically I want my html file to be something like this: 这可能吗?
使用 Vue 3.9.3
Is this possible?
推荐答案
有人回答并建议调查 html-webpack-inline-source-plugin 但删除了他们的答案.但这正是我完成这项工作所需要的.
该插件不是 Vue 或 Vue-CLI 特定的，但如果您执行以下操作，它就可以工作:
Someone answered with a suggestion to look into html-webpack-inline-source-plugin but removed their answer. But that was exactly what I needed to get this done.
1) 在应用根目录添加一个 vue.config.js 文件.
The plugin is not Vue or Vue-CLI specific but it works if you do the following:
2) 上面链接的插件实际上是另一个包的扩展.两者都需要.
1) Add a vue.config.js file in the root of the app.
2) The linked plugin above is actually an extension of another package. You need both.3)
3)4) 添加模板.这对于在 Vue 上下文中工作是必要的，因为如果没有它，默认情况下输出的 html 文件将没有必要的 <div id="app"></div> 并且 Vue 不会t 安装到任何东西.我基本上是拿了正常输出的html文件，稍微修改了一下.
// vue.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
css: {
extract: false,
},
configureWebpack: {
optimization: {
splitChunks: false // makes there only be 1 js file - leftover from earlier attempts but doesn't hurt
},
plugins: [
new HtmlWebpackPlugin({
filename: 'output.html', // the output file name that will be created
template: 'src/output-template.html', // this is important - a template file to use for insertion
inlineSource: '.(js|css)$' // embed all javascript and css inline
}),
new HtmlWebpackInlineSourcePlugin()
]
}
}
4) Add a template. This is necessary for working in the Vue context because without this the output html file by default won't have the necessary <div id="app"></div> and Vue won't mount to anything. I basically took the normal output html file and modified it a little.<!-- 插件默认会在这里插入js -->
