首頁猿問 Vue CLI -...

Vue CLI - 將構建輸出合并到單個 html 文件中

JavaScript

RISEBY 2021-11-12 14:27:37

我有一個用 vue-cli 創建的 vue 項目。運行時的正常輸出yarn build是一個帶有index.htmljs 和 css 子目錄的 dist 文件夾，其中包含相應的 .js 和 .css 文件。我希望構建輸出是包含 js 和 css 的單個 html 文件。我vue.config.js在項目的根目錄中添加了一個文件，并將其設置為輸出單個 js 文件，并且工作正常。但我只想有一個 html 文件，其中包含 js 和 html 文件中已有的任何 css。module.exports = { css: { extract: false, }, configureWebpack: { optimization: { splitChunks: false } } }基本上我希望我的 html 文件是這樣的：<html> <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

查看完整描述

1 回答

浮云間

TA貢獻1829條經驗獲得超4個贊

有人回答建議查看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

// 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文件，稍微修改了一下。

<!DOCTYPE html>

<html>

<head>

<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>

</body>

</html>

然后像正常一樣構建，output.html文件將在/dist文件夾中

反對回復 2021-11-12

1 回答
0 關注
244 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vue CLI - 將構建輸出合并到單個 html 文件中

Vue CLI - 將構建輸出合并到單個 html 文件中

1 回答

添加回答