使用 vue-cli 开发多页应用

修改的webpack配置文件

全局配置

修改 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.jsentry设置的入口文件

plugins:[// https://github.com/ampedandwired/html-webpack-plugin// 多页:index.html → app.jsnew HtmlWebpackPlugin({filename: 'index.html',//生成的htmltemplate: 'index.html',//来源htmlinject: true,//是否开启注入chunks: ['app']//需要引入的Chunk,不配置就会引入所有页面的资源}),// 多页:index2.html → app2.jsnew HtmlWebpackPlugin({filename: 'index2.html',//生成的htmltemplate: 'index2.html',//来源htmlinject: true,//是否开启注入chunks: ['app2']//需要引入的Chunk,不配置就会引入所有页面的资源}),// 多页:index3.html → app3.jsnew HtmlWebpackPlugin({filename: 'index3.html',//生成的htmltemplate: 'index3.html',//来源htmlinject: 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.jsnew 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 CommonsChunkPluginchunksSortMode: 'dependency',chunks: ['manifest','vendor','app']//需要引入的Chunk,不配置就会引入所有页面的资源}),// 多页:index2.html → app2.jsnew 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.jsnew HtmlWebpackPlugin({filename: config.build.index3,template: 'index3.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true},chunksSortMode: 'dependency',chunks: ['manifest','vendor','app3']//需要引入的Chunk,不配置就会引入所有页面的资源}),
]

参考:
小凡哥视频 - 讲解 vuejs2 ,使用 vue-cli 怎么搭起 多页应用


如果页面比较多,可以考虑使用循环将 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-pluginvar conf = {filename: '../views/' + pathname + '.html', //生成的html存放路径,相对于pathtemplate: '../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/')
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247454.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习系统相比较传统的机器学习系统,针对常见的分类问题,精度究竟能有多大提升?...

来源&#xff1a;知乎原文链接&#xff1a;深度学习系统相比较传统的机器学习系统&#xff0c;针对常见的分类问题&#xff0c;精度究竟能有多大提升&#xff1f; 问题&#xff1a; 我现在手头有一个binary classification的问题。数据量在一百万左右。每个sample都是一个14个f…

远程链接错误:这可能是由于credssp加密oracle修正

此错误解决办法 1.WinR 输入regedit打开注册表 找到对应的以下目录HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System 此时如果System下没有CredSSP时创建CredSSP没有Parameters时,创建Parameters 创建方法:右建>>新建>>项 2.在Para…

SpringBoot入门最详细教程

https://www.jianshu.com/p/af3d5800f763 网上有很多springboot的入门教程&#xff0c;自己也因为项目要使用springboot&#xff0c;所以利用业余时间自学了下springboot和springcloud&#xff0c;使用下来发现springboot还是挺简单的&#xff0c;体现了极简的编程风格&#xf…

通过Vue CLI3 快速创建Vue项目并部署到tomcat

1、前提 首先你要安装好nodejs和yarn,直接在官网下载安装包&#xff0c;一键安装即可&#xff0c;不需要什么环境配置&#xff0c;我安装的是最新版本&#xff08;node-v10.13.0、yarn-1.12.3&#xff09; 2、安装 同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3&#x…

简述区块链(1)- 也许只有这一篇

一、唠叨两句 最近一直在考虑一个事情&#xff0c;就是怎么给不太了解技术的人讲清楚区块链。我先试着写下来&#xff0c;然后在逐步打磨吧&#xff0c;目标就是让哪些说看区块链看的云里雾里的同学能对区块链有一些认知。 二、定义 简单的给区块链下个定义&#xff1a;基于加密…

Vue CLI 3.0脚手架如何在本地配置mock数据json

前后端分离的开发模式已经是目前前端的主流模式&#xff0c;至于为什么会前后端分离的开发我们就不做过多的阐述&#xff0c;既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。 我们在开发的过程中&#xff0c;由于后台接口的没有完成或者没有稳定之前我们都是采用…

python 通过下载包setup.py安装模块

下载安装包&#xff0c;并解压到相应的位置 1、打开cmd 2、到达安装目录 3、python setup.py build 4、python setup.py install 转载于:https://www.cnblogs.com/liuchunxiao83/p/11207340.html

webpack之externals操作三部曲--正确的姿势

1.作用 首先webpack提供这个externals选项作用是从打包的bundle文件中排除依赖。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去&#xff0c;而是通过script的方式去访问这些依赖。 2.怎么用&#xff1f; 以jquery为例子&#xff0c;目的是在…

Anaconda3自带jupyter

1、cmd命令行中输入 JupyterNotebook 2、系统自动调起下面页面&#xff08;注册端口冲突是打不开的&#xff09; 转载于:https://www.cnblogs.com/liuchunxiao83/p/11207385.html

python 的按位与 或 异或 运算

符号 描述 运算规则 by MoreWindows & 与 两个位都为1时&#xff0c;结果才为1 &#xff08;统计奇数&#xff09; | 或 两个位都为0时&#xff0c;结果才为0 &#xff08;统计偶数&#xff09; ^ 异或 两…

理解Shadow DOM

1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢&#xff1f;可以理解为一般情况下使用肉眼看不到的DOM结构&#xff0c;那如果一般情况下看不到的话&#xff0c;那也就是说我们无法直接控制操纵的DOM结构。 Shadow DOM 它是HTML的一…

046 实例11-自动轨迹绘制

目录 一、"自动轨迹绘制"问题分析1.1 问题分析1.2 自动轨迹绘制二、"自动轨迹绘制"实例讲解2.1 自动轨迹绘制2.2 数据接口定义2.3 数据文件三、"自动轨迹绘制"举一反三3.1 理解方法思维3.2 应用问题的扩展一、"自动轨迹绘制"问题分析 …

bootstrap-select采坑

bootstrap-select采坑 1.class"selectpicker" 普通的下拉框功能 2.title"请选择城市名称" title的作用与palcehoder一样。 3.select class"selectpicker" multiple selectpicker和multiple属性的搭配使用可实现多选 4.data-live-search"tru…

对vue虚拟dom的研究

Vue.js通过编译将template 模板转换成渲染函数(render ) &#xff0c;执行渲染函数就可以得到一个虚拟节点树在对 Model 进行操作的时候&#xff0c;会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。这个过程主要是将新旧虚拟节点进行差异对比…

element-ui之dialog组件title插槽的使用

dialog对话框组件title属性的slot使用方法 使用背景 需要单独控制title中某个数据显示及样式&#xff0c;footer也一样 <el-dialog// 也可以这样写,但是没有办法单独控制name age的显示// title"name age"title"提示":visible.sync"dialogVisi…

css3自适应布局单位vw,vh

视口单位(Viewport units) 什么是视口&#xff1f; 在桌面端&#xff0c;视口指的是在桌面端&#xff0c;指的是浏览器的可视区域&#xff1b;而在移动端&#xff0c;它涉及3个视口&#xff1a;Layout Viewport&#xff08;布局视口&#xff09;&#xff0c;Visual Viewport…

python 操作 elasticsearch-7.0.2 遇到的问题

错误一&#xff1a;TypeError: search() got an unexpected keyword argument doc_type&#xff0c;得到不预期外的参数 解决方法&#xff1a;elasticsearch7里不用文档类型&#xff0c;所以去掉 doc_typecredit_data 错误二&#xff1a;RequestError(400, illegal_argument_ex…

用到的Shell

sed 1i 添加的内容 file #这是在第一行前添加字符串 sed $i 添加的内容 file #这是在最后一行行前添加字符串 sed $a添加的内容 file #这是在最后一行行后添加字符串 sed -i s/.*/行首添加内容&行尾添加内容/ 文件名 //每一行 sed -i $a新增的一行 tars_build_tar.sh a…

如何解决浏览器缩小出现横向滚动条时网页背景图出现空白的问题

原因&#xff1a; 当窗口缩小时&#xff0c;浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(1024px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面&#xff0c;就出现了容器宽度理解上的差异&#xff0c;出现了一个非常奇特的BUG。 解…

前端设计模式

1. 单例模式 2.装饰器模式 转载于:https://www.cnblogs.com/lyraLee/p/11210985.html