How to use vue-cli to implement multi-page applications
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!

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

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

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

Hot Topics

Vue-cli3.0 is a new scaffolding tool based on Vue.js. It can help us quickly create a Vue project and provides many convenient tools and configurations. Below we will introduce step by step the steps and process of creating a project using Vue-cli3.0. To install Vue-cli3.0, you first need to install Vue-cli3.0 globally. You can install it through npm: npminstall-g@vue/cli

Vue-cli is a scaffolding tool officially provided by Vue.js to build Vue projects. By using Vue-cli, you can quickly build the basic skeleton of a Vue project, allowing developers to focus on the implementation of business logic without spending a lot of time. To configure the basic environment of the project. This article will introduce the basic usage of Vue-cli and commonly used plug-in recommendations, aiming to provide a guide to the use of Vue-cli for beginners. 1. Basic usage of Vue-cli Install Vue-cli

Vue is a popular front-end framework favored by many developers for its flexibility and ease of use. In order to better develop Vue applications, the Vue team has developed a powerful tool-Vue-cli, which makes it easier to develop Vue applications. This article will introduce you to the use of Vue-cli in detail. 1. Install Vue-cli Before using Vue-cli, you need to install it first. First, you need to make sure you have Node.js installed. Then, install Vue-c using npm

Instructions for using Vue-cli scaffolding tools and project configuration. With the continuous development of front-end technology, front-end frameworks are attracting more and more attention from developers. As a leader in front-end frameworks, Vue.js has been widely used in the development of various web applications. Vue-cli is a command line-based scaffolding officially provided by Vue.js. It can help developers quickly initialize the Vue.js project structure, allowing us to focus more on business development. This article will introduce the installation and installation of Vue-cli

The specific method is as follows: 1. Create the backend server object upstreammixVueServer{serverbaidu.com;#This is your own server domain name} 2. Create the access port and reverse proxy rule server{listen8082;server_namelocalhost;location/{rootE:/mix_vue/dist;# Locate the directory of the project#indexindex.htmlindex.htm;try_files$uri$uri//index.html;#Configure according to the rules of the official website}location~\.php${proxy_p

Technologies used: 1. vue.js, the core of the vue-cli project, whose main features are two-way data binding and component systems; 2. vue-router, the routing framework; 3. vuex, the state manager for vue application project development ; 4. axios, used to initiate http requests such as GET or POST; 5. vux, a mobile UI component library specially designed for vue; 6. emit.js, used to manage the vue event mechanism; 7. webpack, module Load and vue-cli project packager.

With the continuous development of front-end technology, the problems we face have gradually become more complex, which not only requires our code to have a reasonable structure and good modular design, but also requires code maintainability and execution efficiency. In this process, how to ensure the quality and standardization of the code has become a difficult problem. Fortunately, the emergence of code standardization and bug detection tools provides us with effective solutions. Using ESLint for code standardization and bug detection in the Vue.js framework has become a common choice. 1. ESLint

Projects built in history mode need to rely on background technology. The nginx reverse proxy is used here to deploy the project. The specific method is as follows: 1. Create the backend server object upstreammixVueServer{serverbaidu.com;#This is your own server domain name} 2. Create the access port and reverse proxy rule server{listen8082;server_namelocalhost;location/{rootE:/mix_vue/dist;# Locate the project directory #indexindex.htmlindex.htm;try_files$uri$uri//
