基于vue cli重构多页面脚手架过程详解
发布时间：2020-12-17 02:37:32 所属栏目：百科 来源：网络整理
导读：官方提供的项目生成工具vue-cli没有对多页面webApp的支持，但是在实际的项目中，我们需要这样的脚手架，参考了很多大牛的方法，这里提供了一种我的单页面脚手架转换为多页面脚手架的方案，供大家参考。不好的地方也请大家指正。 准备 使用vue-cli生成一个你
|
官方提供的项目生成工具vue-cli没有对多页面webApp的支持，但是在实际的项目中，我们需要这样的脚手架，参考了很多大牛的方法，这里提供了一种我的单页面脚手架转换为多页面脚手架的方案，供大家参考。不好的地方也请大家指正。 准备使用vue-cli生成一个你需要的单页面项目脚手架，然后我们就要开始我们的改装工程了。 重构过程步骤一 改变目录结构
步骤二 修改build下的配置文件在生产环境下会分页面打包独有js文件，并抽取公共js，不会什么都打包成一坨。打包后文件目录结构也是比较清晰地。一下所有修改都在build文件夹下 step1 修改utils.js，增加两个函数，一个用来获取页面多入口，一个用来输入打包后的页面，并注入js: {
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这个属性值的后面加上我们上面的方法，下面是代码片段： 在plugins这个属性值的后面加上我们上面的方法，下面是代码片段： 配置完成。正常启动项目即可。 总结以上所述是小编给大家介绍的基于vue cli重构多页面脚手架过程详解。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |