关键词: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: JSO