Projects created by vue-cli, how to configure multi-page implementation

The command line tool vue-cli provided by vue officially can quickly build single-page applications. The default page entry is, then, if we need multiple pages, how to configure it is actually not complicated.

Assume that the page to be created is a rule, the following is a rule as an example

Create a new html page

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title></title>
	</head>
	<body>
		<span style="color:#000000;"><div ></div></span>
		<!-- built files will be auto injected -->
	</body>
</html>

Create entry files and, imitate and

<template>
	<div >
		<router-view></router-view>
	</div>
</template>
<script>
	export default {
		name: 'lottery',
		data() {
			return {
			}
		},
		mounted: function() {
			
			this.$({
					path:'/rule'
			});
		},
	}
</script>
<style lang="less">
	body{
		margin:0;
		padding:0;
	}
</style>

import Vue from 'vue'
import Rule from './'
import router from './router'
import $ from 'jquery'
//import vConsole from 'vconsole'
import fastclick from 'fastclick'
 = false
()
 = false;
 
/* eslint-disable no-new */
new Vue({
 el: '#rule',
 router,
 template: '<Rule/>',
 components: { Rule },
})

Modify config/

build add rule address, that is, the address and name generated after compilation

build: {
  // Template for 
  index: (__dirname, '../dist/'),
  rule: (__dirname, '../dist/'),
  ……
 }

rule: (__dirname, '../dist/') means that after compiling, the file name is

Modify build/

Configure entry

entry: {
  app: './src/',  
  rule: './src/'
 },

Modify build/

Add in plugins

new HtmlWebpackPlugin({ 
   filename: '', 
   template: '', 
   inject: true, 
   chunks:['rule'] 
  }),

Modify build/

Add in plugins

new HtmlWebpackPlugin({
   filename: ,
   template: '',
   inject: true,
   minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // /kangax/html-minifier#options-quick-reference
   },
   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
   chunksSortMode: 'dependency',
   chunks: ['manifest','vendor','rule']
  }),

All of the above

When the background address jumps to your newly created page, since the default route configured is public, you can configure multiple routing files yourself and reference them separately.

You can jump to the specified route in the middle to achieve page control

mounted: function() {
			
	this.$({
		path:'/rule'
	});
},

The above project created by vue-cli is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.