Vue项目打包成一个HTML文件(包含CSS,JS)

in 前端 with 0 comment

vue

关键词：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()
    ]
  }
}

或者使用如下配置
需要对preload插件做一些修改,原因见(https://github.com/DustinJackson/html-webpack-inline-source-plugin/issues/50)

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

← → ↓ ↑
Comments are closed.