vue生成静态html文件_Vue项目打包成一个HTML文件(包含CSS,JS)

关键词：Vue打包成单文件,vue single file,Webpack打包成单文件,webpack single file,

有些时候项目比较小，就是一个小工具之类啥的。

想打包一个成一个HTML文件包含所有的CSS，JS。

这样方便部署和分享，就是一个文件。

注意事项{ path: '/foo', component: () => import('./Foo.vue')}

路由懒加载不能够正确打包进文件，需要改成静态

import Foo from './Foo.vue'

{ path: '/foo', component: Foo }

用到两个webpack插件npm install --save-dev html-webpack-inline-source-plugin

npm install --save-dev html-webpack-plugin

vue.config.js可以这样配置const HtmlWebpackPlugin = require('html-webpack-plugin')

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')

module.exports = {

publicPath: '',//使用相对路径

productionSourceMap: false,

configureWebpack: {

plugins: [

new HtmlWebpackPlugin({

title: 'JSON和PHP Array 互转',

template: 'public/index.html',

inlineSource: '.(js|css)$' // embed all javascript and css inline

}),

new HtmlWebpackInlineSourcePlugin()

]

}

}module.exports = {

publicPath: '',//使用相对路径

chainWebpack: config => {

config.plugin('preload')

.tap(args => {

args[0].fileBlacklist.push(/\.css/, /\.js/)

return args

})

config.plugin('inline-source')

.use(require('html-webpack-inline-source-plugin'))

config

.plugin('html')

.tap(args => {

args[0].title = 'JSON和PHP Array 互转'

args[0].inlineSource = '(\.css|\.js$)'

return args

})

},

productionSourceMap: false,

devServer: {

https: false

}

}

赞助一杯咖啡☕️

本文由 widdy 创作，采用 知识共享署名4.0 国际许可协议进行许可

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名

最后编辑时间为: May 13, 2020 at 07:46 pm