Home > Developer > JavaScript
A project created by vue-cli, how to configure multiple pages, and how to create vue-cli
Vue-cli, a command line tool officially provided by vue, allows you to quickly build a single-page application. Indexing index.html on a page is not complicated if we need to configure multiple pages.
Assume that the page to be created is rule. The following uses rule as an example.
Create a new html page
<!DOCTYPE html>Create the entry file Rule. vue and rule. js.
<template><div id="rule"><router-view></router-view></div></template><script>export default {name: 'lottery',data() {return {}},mounted: function() {this.$router.replace({path:'/rule'});},}</script><style lang="less">body{margin:0;padding:0;}</style>Rule. js
import Vue from 'vue'import Rule from './Rule.vue'import router from './router'import $ from 'jquery'//import vConsole from 'vconsole'import fastclick from 'fastclick'Vue.config.productionTip = falsefastclick.attach(document.body)Vue.config.productionTip = false; /* eslint-disable no-new */new Vue({ el: '#rule', router, template: '<Rule/>', components: { Rule },})Modify config/index. js
Build‑ruleaddress, that is, the address and name of the compiled rule.html
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.php'), rule: path.resolve(__dirname, '../dist/rule.php'), …… }Rule: path. resolve (_ dirname, '../dist/rule.php' after compilation and then distfile, the name of rule.html after compilation is rule. php
Modify build/webpack. base. conf. js
Configure entry
entry: { app: './src/main.js', rule: './src/rule.js' },Modify build/webpack. dev. conf. js
Add in plugins
new HtmlWebpackPlugin({ filename: 'rule.html', template: 'rule.html', inject: true, chunks:['rule'] }),Modify build/webpack. prod. conf. js
Add in plugins
new HtmlWebpackPlugin({ filename: config.build.rule, template: 'rule.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','rule'] }),All of the above
After the background address jumps to your new page, you can configure multiple routing files and reference them as the default routing is public.
You can jump to the specified route in Rule. vue to achieve page control.
mounted: function() {this.$router.replace({path:'/rule'});},In the above project created by vue-cli, the implementation method of configuring multiple pages is all the content that I have shared with you. I hope you can provide a reference and support for the customer's house.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
