基于vue cli重构多页面脚手架过程详解


Posted in Javascript onJanuary 23, 2018

官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考。不好的地方也请大家指正。

准备

使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了。

重构过程

步骤一 改变目录结构

  • step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹
  • step2 将src目录下的main.js和App.vue移动到step1中的index文件夹下,并将main.js重命名为index.js
  • step3 将src目录下的router文件夹移动到step1中的index文件夹下,如果不使用router可以再index.js中注释掉,我没有使用,因为我的每个页面不是单页面的应用,不必要使用路由功能
  • step4 将根目录下的index.html文件移动到step1中的index文件夹下

步骤二 修改build下的配置文件

在生产环境下会分页面打包独有js文件,并抽取公共js,不会什么都打包成一坨。打包后文件目录结构也是比较清晰地。一下所有修改都在build文件夹下

step1 修改utils.js,增加两个函数,一个用来获取页面多入口,一个用来输入打包后的页面,并注入js:

var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(__dirname, '../src/views')
var merge = require('webpack-merge')
//多入口配置
//获取views文件夹下,每个页面下的index.js作为页面入口,故每个页面下都必须有index.js
exports.entries = function() {
 var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
 var map = {}, tmp = [], pathname = '';
 entryFiles.forEach((filePath) => {
 var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 map[tmp[2] + '/' + filename] = filePath
 })
 return map
}
//多页面输出配置
//读取views文件夹下的对应每个页面的html后缀文件,然后放入数组中
//如果想要更深的定制或者修改,建议大家看一下CommonsChunkPlugin
//推荐一个基础的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
 let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
 let arr = []
 entryHtml.forEach((filePath) => {
 let jsPath = '', tmp = [];
 let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 jsPath = tmp[2] + '/' + 'index'
 let conf = {
  template: filePath,
  filename: filename + '.html',
  chunks: ['manifest', 'vendors', jsPath],
  inject: true
 }
 if (process.env.NODE_ENV === 'production') {
  conf = merge(conf, {
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
  })
 }
 arr.push(new HtmlWebpackPlugin(conf))
 })
 return arr
}
step2 修改webpack.base.conf.js文件配置的入口
// entry: {
// app: './src/main.js'
// },
entry: utils.entries(),
step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码,将其注释掉:
new HtmlWebpackPlugin({
 filename: 'index.html',
 template: 'index.html',
 inject: true
}),

在plugins这个属性值的后面加上我们上面的方法,下面是代码片段:

// new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // }),
 new FriendlyErrorsPlugin()
 ].concat(utils.htmlPlugin())
step4 修改webpack.prod.conf.js 找到下面的代码,注释掉:
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'
}),

在plugins这个属性值的后面加上我们上面的方法,下面是代码片段:

new CopyWebpackPlugin([{
  from: path.resolve(__dirname, '../static'),
  to: config.build.assetsSubDirectory,
  ignore: ['.*']
 }])
 ].concat(utils.htmlPlugin())

配置完成。正常启动项目即可。

总结

以上所述是小编给大家介绍的基于vue cli重构多页面脚手架过程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript web页面刷新的方法收集
Jul 02 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 #Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 #Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 #Javascript
浅谈vue项目重构技术要点和总结
Jan 23 #Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 #Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 #Javascript
three.js 入门案例详解
Jan 23 #Javascript
You might like
PHP新手上路(七)
2006/10/09 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
基于python图像处理API的使用示例
2020/04/03 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
是否有自动比较结构的方法
2015/06/03 面试题
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
成考报名单位证明范本
2014/01/16 职场文书
授权委托书格式模板
2014/04/03 职场文书
护林员个人总结
2015/03/04 职场文书
学生退学证明
2015/06/23 职场文书
干部外出学习心得体会
2016/01/18 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android