vue webpack多页面构建的实例代码第2/3页
更新时间：2018年09月11日 14:32:05 作者：ccyinghua
这篇文章主要介绍了vue webpack多页面构建的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
, //模板路径
inject: true,
// excludeChunks 允许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口
// 如何更好的理解这块呢？举个例子：比如本demo中包含两个模块（index和about），最好的当然是各个模块引入自己所需的js，
// 而不是每个页面都引入所有的js，你可以把下面这个excludeChunks去掉，然后npm run build，然后看编译出来的index.html和about.html就知道了
// filter：将数据过滤，然后返回符合要求的数据，Object.keys是获取JSON对象中的每个key
excludeChunks: Object.keys(pages).filter(item => {
return (item != page)
})
}
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}
(4) 修改build/webpack.prod.conf.js
删除文件内原有的HtmlWebpackPlugin相关内容
...
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
...
在文件最后添加
var pages = utils.getEntries('./src/entry/*/*.html')
for(var page in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: page + '.html',
template: pages
相关文章
Vue轮播图组件的封装可通过封装组件、使用插件、配置化等方式实现，主要包括图片预加载、定时轮播、无限滚动、手势滑动、响应式布局等功能，实现方式可使用Vue的生命周期函数、自定义事件、计算属性等技术2023-04-04
这篇文章主要介绍了浅谈vue加载优化策略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了关于Vue实现组件信息的缓存问题的相关资料,需要的朋友可以参考下2017-08-08
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
这篇文章主要介绍了解决vue 使用axios.all()方法发起多个请求控制台报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue中字符串如何拼接路由path路径方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了vue中el-input绑定键盘按键(按键修饰符)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
Vue 初始化时就会通过 Object.defineProperty 拦截属性的 getter 和 setter ，为对象的每个值创建一个 dep 并用 Dep.addSub() 来存储该属性值的 watcher 列表，这篇文章主要介绍了Vue 响应式系统依赖收集过程分析,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Vue如何使用混合Mixins和插件开发详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
本文主要介绍了vue+element-ui表格自定义列模版的实现,通过插槽完美解决了element-ui表格自定义列模版的问题,具有一定的参考价值,感兴趣的可以了解一下2024-05-05
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
这篇文章主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法，一般使用Window scrollTo() 方法实现，本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下2017-11-11
最新评论