100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue生成静态html文件_Vue项目打包成一个HTML文件(包含CSS JS)

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

时间:2022-04-29 16:27:26

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。