如何使用 vue-cli 开发多页应用方法
如何使用 vue-cli 开发多页应用?本文主要介绍了详解如何使用 vue-cli 开发多页应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。
全局配置
修改 webpack.base.conf.js
打开 ~\build\webpack.base.conf.js ,找到entry,添加多入口
entry: { app: './src/main.js', app2: './src/main2.js', app3: './src/main3.js', },
运行、编译的时候每一个入口都会对应一个Chunk
run dev 开发环境
修改 webpack.dev.conf.js
打开 ~\build\webpack.dev.conf.js ,在plugins下找到new HtmlWebpackPlugin,在其后面添加对应的多页,并为每个页面添加Chunk配置
chunks: ['app']中的app对应的是webpack.base.conf.js中entry设置的入口文件
plugins:[ // https://github.com/ampedandwired/html-webpack-plugin // 多页:index.html → app.js new HtmlWebpackPlugin({ filename: 'index.html',//生成的html template: 'index.html',//来源html inject: true,//是否开启注入 chunks: ['app']//需要引入的Chunk,不配置就会引入所有页面的资源 }), // 多页:index2.html → app2.js new HtmlWebpackPlugin({ filename: 'index2.html',//生成的html template: 'index2.html',//来源html inject: true,//是否开启注入 chunks: ['app2']//需要引入的Chunk,不配置就会引入所有页面的资源 }), // 多页:index3.html → app3.js new HtmlWebpackPlugin({ filename: 'index3.html',//生成的html template: 'index3.html',//来源html inject: true,//是否开启注入 chunks: ['app3']//需要引入的Chunk,不配置就会引入所有页面的资源 }) ]
run build 编译
修改 config/index.js
打开~\config\index.js,找到build下的index: path.resolve(__dirname, '../dist/index.html'),在其后添加多页
build: { index: path.resolve(__dirname, '../dist/index.html'), index2: path.resolve(__dirname, '../dist/index2.html'), index3: path.resolve(__dirname, '../dist/index3.html'), },
修改 webpack.prod.conf.js
打开~\build\webpack.prod.conf.js,在plugins下找到new HtmlWebpackPlugin,在其后面添加对应的多页,并为每个页面添加Chunk配置
HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中对应的 build
plugins: [ // 多页:index.html → app.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', chunks: ['manifest','vendor','app']//需要引入的Chunk,不配置就会引入所有页面的资源 }), // 多页:index2.html → app2.js new HtmlWebpackPlugin({ filename: config.build.index2, template: 'index2.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest','vendor','app2']//需要引入的Chunk,不配置就会引入所有页面的资源 }), // 多页:index3.html → app3.js new HtmlWebpackPlugin({ filename: config.build.index3, template: 'index3.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest','vendor','app3']//需要引入的Chunk,不配置就会引入所有页面的资源 }), ]
如果页面比较多,可以考虑使用循环将 HtmlWebpackPlugin 添加到 plugins
// utils.js exports.getEntry = function(globPath, pathDir) { var files = glob.sync(globPath); var entries = {}, entry, dirname, basename, pathname, extname; for (var i = 0; i < files.length; i++) { entry = files[i]; dirname = path.dirname(entry); extname = path.extname(entry); basename = path.basename(entry, extname); pathname = path.join(dirname, basename); pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname; entries[pathname] = ['./' + entry]; } return entries; }
// webpack.base.conf.js var pages = Object.keys(utils.getEntry('../src/views/**/*.html', '../src/views/')); pages.forEach(function (pathname) { // https://github.com/ampedandwired/html-webpack-plugin var conf = { filename: '../views/' + pathname + '.html', //生成的html存放路径,相对于path template: '../src/views/' + pathname + '.html', //html模板路径 inject: false, //js插入的位置,true/'head'/'body'/false /* * 压缩这块,调用了html-minify,会导致压缩时候的很多html语法检查问题, * 如在html标签属性上使用{{...}}表达式,所以很多情况下并不需要在此配置压缩项, * 另外,UglifyJsPlugin会在压缩代码的时候连同html一起压缩。 * 为避免压缩html,需要在html-loader上配置'html?-minimize',见loaders中html-loader的配置。 */ // minify: { //压缩HTML文件 // removeComments: true, //移除HTML中的注释 // collapseWhitespace: false //删除空白符与换行符 // } }; if (pathname in config.entry) { conf.favicon = 'src/images/favicon.ico'; conf.inject = 'body'; conf.chunks = ['vendors', pathname]; conf.hash = true; } config.plugins.push(new HtmlWebpackPlugin(conf)); });
同样入口 entry 也可以使用
// webpack.base.conf.js entry: { app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/') },
相关推荐:
vue-cli快速构建vue应用并实现webpack打包详解
vue-cli中自定义路径别名 assets和static文件夹的区别
以上是如何使用 vue-cli 开发多页应用方法的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

这个AI辅助编程工具在这个AI迅速发展的阶段,挖掘出了一大批好用的AI辅助编程工具。AI辅助编程工具能够提高开发效率、改善代码质量、降低bug率,是现代软件开发过程中的重要助手。今天大姚给大家分享4款AI辅助编程工具(并且都支持C#语言),希望对大家有所帮助。https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI编码助手,可帮助你更快、更省力地编写代码,从而将更多精力集中在问题解决和协作上。Git

2022年3月3日,距世界首个AI程序员Devin诞生不足一个月,普林斯顿大学的NLP团队开发了一个开源AI程序员SWE-agent。它利用GPT-4模型在GitHub存储库中自动解决问题。SWE-agent在SWE-bench测试集上的表现与Devin相似,平均耗时93秒,解决了12.29%的问题。SWE-agent通过与专用终端交互,可以打开、搜索文件内容,使用自动语法检查、编辑特定行,以及编写和执行测试。(注:以上内容为原内容微调,但保留了原文中的关键信息,未超过指定字数限制。)SWE-A

Go语言开发移动应用程序教程随着移动应用市场的不断蓬勃发展,越来越多的开发者开始探索如何利用Go语言开发移动应用程序。作为一种简洁高效的编程语言,Go语言在移动应用开发中也展现出了强大的潜力。本文将详细介绍如何利用Go语言开发移动应用程序,并附上具体的代码示例,帮助读者快速入门并开始开发自己的移动应用。一、准备工作在开始之前,我们需要准备好开发环境和工具。首

五大热门Go语言库汇总:开发必备利器,需要具体代码示例Go语言自从诞生以来,受到了广泛的关注和应用。作为一门新兴的高效、简洁的编程语言,Go的快速发展离不开丰富的开源库的支持。本文将介绍五大热门的Go语言库,这些库在Go开发中扮演了至关重要的角色,为开发者提供了强大的功能和便捷的开发体验。同时,为了更好地理解这些库的用途和功能,我们会结合具体的代码示例进行讲

《了解VSCode:这款工具到底是用来干什么的?》作为一个程序员,无论是初学者还是资深开发者,都离不开代码编辑工具的使用。在众多编辑工具中,VisualStudioCode(简称VSCode)作为一款开源、轻量级、强大的代码编辑器备受开发者欢迎。那么,VSCode到底是用来干什么的?本文将深入探讨VSCode的功能和用途,并提供具体的代码示例,以帮助读者

Java开发必备:详细解读Java虚拟机安装步骤,需要具体代码示例随着计算机科学和技术的发展,Java语言已成为广泛使用的编程语言之一。它具有跨平台、面向对象等优点,逐渐成为开发人员的首选语言。在使用Java进行开发之前,首先需要安装Java虚拟机(JavaVirtualMachine,JVM)。本文将详细解读Java虚拟机的安装步骤,并提供具体的代码示

PHP在Web开发中是属于后端。PHP是一种服务器端脚本语言,主要用于处理服务器端的逻辑,生成动态网页内容。与前端技术相比,PHP更多地用于与数据库交互、处理用户请求以及生成页面内容等后端操作。接下来通过具体的代码示例来说明PHP在后端开发中的应用。首先,我们来看一个简单的PHP代码示例,用于连接数据库并查询数据:

Go语言作为一种快速、高效的编程语言,在后端开发领域广受欢迎。然而,很少有人将Go语言与前端开发联系起来。事实上,使用Go语言进行前端开发不仅可以提高效率,还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性,并提供具体的代码示例,帮助读者更好地了解这一领域。在传统的前端开发中,通常会使用JavaScript、HTML和CSS来构建用户界面
