Vue-cli 3.x what is the method of configuring multiple pages
This article mainly explains "what is the method of configuring multi-pages in vue-cli 3.x", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what is the method of configuring multiple pages in vue-cli 3.x"?
1. First of all, if we have vue cil2 on our system, we need to uninstall it and then reinstall vue cil3. After the installation and configuration is complete, we will create a corresponding page and file.
When creating multiple pages, we need to create a login.html file under the index.html statistics file, and then create the corresponding login.js and login.vue in the src/pages/login folder (we can modify it through the App.vue and main.js in the file. )
Login.js file import Vue from 'vue'import Login from'. / login.vue'Vue.config.productionTip = falsenew Vue ({render: h = > h (Login)}). $mount ('# login') login.vue file export default {name:'login', methods: {go () {_ window.location.href= "/"}
two。 Configure the vue.config.js file.
When we download the update, the build and config files in the initialization project will be gone, so if we want to configure webpack-related content, we need to create a vue.config.js file in the root directory (at the same level as package.json). If the file exists, it will be automatically loaded by @ vue/cli-service. There are the following parameters: entry, template, filename, title, chunks, all of which can be selected except entry. The code is as follows:
Vue.config.js file module.exports = {pages: {index: {/ / page entry entry:'src/main.js', / / template source template:'public/index.html', / / output filename:'index.html', in dist/index.html / / when using the title option The title tags in / / template need to be generic chunk and vendor chunk extracted by title:'index', / /. / / chunks: ["chunk-vendors", "chunk-common", "index"]}, login: {entry:'src/pages/login/login.js', template:'public/login.html', filename:'login.html', title:'login'}} so far I believe you have a deeper understanding of "what is the method of configuring multi-pages in vue-cli 3.x", so you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
