This article mainly introduces in detail how to use vue-cli to develop multi-page applications. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.
This article introduces how to use vue-cli to develop multi-page applications and share it with everyone. The details are as follows:
Modified webpack configuration file
Global configuration
Modify webpack.base.conf.js
Open ~\build\webpack.base.conf.js and find the entry , add multiple entries
entry: { app: './src/main.js', app2: './src/main2.js', app3: './src/main3.js', },
When running and compiling, each entry will correspond to aChunk
run dev development environment
Modify webpack.dev.conf.js
Open ~\build\webpack.dev.conf.js, find new HtmlWebpackPlugin under plugins, add corresponding multiple pages behind it, and add Chunk configuration
chunks: The app in ['app'] corresponds to the entry file set by entry in webpack.base.conf.js
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 compile
Modify config/index.js
Open ~\config\index.js and find the index under build: path.resolve(__dirname, '../dist/index.html') , add multiple pages after it
build: { index: path.resolve(__dirname, '../dist/index.html'), index2: path.resolve(__dirname, '../dist/index2.html'), index3: path.resolve(__dirname, '../dist/index3.html'), },
Modify webpack.prod.conf.js
Open ~\build\webpack.prod.conf.js, under plugins Find new HtmlWebpackPlugin, add corresponding multiple pages after it, and add Chunk configuration for each page.
The filename in HtmlWebpackPlugin refers to the corresponding 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,不配置就会引入所有页面的资源 }), ]
in config/index.js If there are many pages, you can consider using a loop to add HtmlWebpackPlugin to 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)); });
You can also use the same entry entry
// webpack.base.conf.js entry: { app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/') },
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement label scrolling switching in JS
How to use the EasyUI window in jQuery
How to use laydate.js date plug-in in Angular4.0
Issues about unsafe image paths when using Angular4
How to build Electron applications in Webpack
The above is the detailed content of How to use vue-cli to implement multi-page applications. For more information, please follow other related articles on the PHP Chinese website!

Vue是一种流行的前端框架,它的灵活性和易用性受到了许多开发者的青睐。为了更好的开发Vue应用程序,Vue团队开发了一个强大的工具-Vue-cli,使得开发Vue应用程序变得更加容易。本文将为您详细介绍Vue-cli的使用方法。一、安装Vue-cli使用Vue-cli之前,需要先安装它。首先,您需要确保已经安装了Node.js。然后,使用npm安装Vue-c

Vue-cli脚手架工具使用及项目配置说明随着前端技术的不断发展,前端框架也越来越受到开发者的关注。Vue.js作为前端框架的佼佼者,已经被广泛应用于各种Web应用的开发中。Vue-cli是Vue.js官方提供的一个基于命令行的脚手架,可以帮助开发者快速初始化Vue.js项目结构,让我们能够更专注于业务开发。本文将介绍Vue-cli的安装和

具体做法如下:1、创建后台服务器对象upstreammixVueServer{serverbaidu.com;#这里是自己服务器域名}2、创建访问端口和反向代理规则server{listen8082;server_namelocalhost;location/{rootE:/mix_vue/dist;#定位到项目的目录#indexindex.htmlindex.htm;try_files$uri$uri//index.html;#根据官网这规则配置}location~\.php${proxy_p

Vue-cli是Vue.js官方提供的搭建Vue项目的脚手架工具,通过使用Vue-cli可以快速搭建Vue项目的基本骨架,便于开发人员将注意力集中在业务逻辑的实现上,而不用花费大量时间来配置项目的基础环境。本文将介绍Vue-cli的基本使用方法以及常用的插件推荐,旨在为初学者提供一份Vue-cli的使用指南。一、Vue-cli的基本使用方法安装Vue-cli

用到的技术:1、vue.js,vue-cli工程的核心,主要特点是双向数据绑定和组件系统;2、vue-router,路由框架;3、vuex,vue应用项目开发的状态管理器;4、axios,用于发起GET、或POST等http请求;5、vux,专为vue设计的移动端UI组件库;6、emit.js,用于vue事件机制的管理;7、webpack,模块加载和vue-cli工程打包器。

随着前端技术的不断发展,我们面临的问题也逐渐复杂了起来,不仅要求我们的代码结构合理、模块化设计良好,更需要代码的可维护性和执行效率。在这个过程中,如何保证代码的质量和规范性成为了一个难题。万幸的是,代码规范化和bug检测工具的出现,为我们提供了有效的解决方案。而在Vue.js框架中使用ESLint进行代码规范化和bug检测已成为一种普遍选择。一、ESLint

Vue-cli3.0是一个基于Vue.js的全新脚手架工具,它可以帮助我们快速创建一个Vue项目并且提供了很多便捷的工具和配置。下面我们就来一步步介绍使用Vue-cli3.0创建项目的步骤和过程。安装Vue-cli3.0首先需要全局安装Vue-cli3.0,可以通过npm进行安装:npminstall-g@vue/cli安

用history模式构建的项目需要借助后台技术,这里选用的是nginx反向代理来部署项目。具体做法如下:1、创建后台服务器对象upstreammixVueServer{serverbaidu.com;#这里是自己服务器域名}2、创建访问端口和反向代理规则server{listen8082;server_namelocalhost;location/{rootE:/mix_vue/dist;#定位到项目的目录#indexindex.htmlindex.htm;try_files$uri$uri//


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

WebStorm Mac version
Useful JavaScript development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

SublimeText3 Chinese version
Chinese version, very easy to use

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Dreamweaver Mac version
Visual web development tools
