基于vue cli重构多页面脚手架过程详解
时间:2019-04-13
本文章向大家介绍基于vue cli重构多页面脚手架过程详解,主要包括基于vue cli重构多页面脚手架过程详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
官方提供的项目生成工具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重构多页面脚手架过程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 【直播】我的基因组57:最简陋的祖源分析
- asp.net web api 使用Odata
- TensorFlow从0到1丨第十六篇 L2正则化对抗“过拟合”
- TensorFlow从0到1 | 第十七章 Step By Step上手TensorBoard
- C#要点
- MySQL索引背后的数据结构及算法原理
- 生物信息Python从入门到精通
- Entity Framework——建模建库
- asp.net web api 构建api帮助文档
- TensorFlow从0到1 | 第十八章: 升级手记:TensorFlow 1.3.0
- 设计一个可扩展的用户登录系统
- 字符串和编码
- windows service编程
- Entity Framework——常见报错总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python第三十课--异常(else讲解)
- Linux系统——shell脚本编程基础介绍
- python第三十课--异常(raise关键字)
- python第三十课--异常(异常对象传递过程)
- python第三十课--异常(with as操作)
- linux系统运维企业常见面试题集合(二)
- Linux系统Shell编程—企业生产案例(一)
- python第三十一课--递归(1.简单递归函数的定义和使用)
- python第三十一课--递归(2.遍历某个路径下面的所有内容)
- python第三十一课--递归(3.递归的弊端)
- python第三十二课——栈
- linux系统运维企业常见面试题集合(三)
- python第三十二课——队列
- python第三十四课——1.匿名函数的定义和使用
- python第三十四课——2.匿名函数配合容器函数的使用