我有一个用vue-cli创建的vue项目。运行时的正常输出yarn build
是一个dist文件夹,其中包含一个index.html
,js和css子目录以及相应的.js和.css文件。
我希望生成的输出是包含js和css的单个html文件。
我vue.config.js
在项目的根目录中添加了一个文件,并将其设置为输出单个js文件,并且工作正常。但我只想在html文件中包含一个js和任何CSS的html文件。
module.exports = {
css: {
extract: false,
},
configureWebpack: {
optimization: {
splitChunks: false
}
}
}
基本上我希望我的html文件是这样的:
<html lang=en>
<head>
... meta tags
<title>my title</title>
</head>
<body>
<div id=app></div>
<script>
// contents of the output js file here
</script>
</body>
</html>
这可能吗?
使用Vue 3.9.3
有人回答了一个建议,以研究html-webpack-inline-source-plugin,但删除了答案。但这正是我需要完成的工作。
该插件不是特定于Vue或Vue-CLI的,但是如果您执行以下操作,它将起作用:
1)vue.config.js
在应用程序的根目录中添加一个文件。
2)上面链接的插件实际上是另一个软件包的扩展。你们两个都需要。
npm install --save-dev html-webpack-plugin
npm install --save-dev html-webpack-inline-source-plugin
3)
// 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)添加模板。这对于在Vue上下文中工作是必需的,因为没有它,默认情况下,输出html文件将没有必要的内容,<div id="app"></div>
而Vue将不会装载到任何东西。我基本上采用了正常的输出html文件并对其进行了一些修改。
<!-- output-template.html -->
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<title>example title</title>
</head>
<body><noscript><strong>We're sorry but my example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id=app>
</div>
<!-- plugin will insert js here by default -->
</body>
</html>
然后像平常一样构建,output.html
文件将在/dist
文件夹中
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句