Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use vue-cli3 project to build multi-page mode". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

(1) create a html file for the login page

Create a login.html in the public folder of the project, copy the contents of index.html, and change the title and id to login.

(2) create a login folder under the src folder, and create three files: login.main.js, login.router.js and login.vue.

Login.main.js: modelled on main.jsimport Vue from 'vue';import login from'. / login.vue';import router from'. / login.router';// import store from'. / store';Vue.config.productionTip = false;new Vue ({router, render: h = > h (login),}). $mount ('# login'); login.router.js (modeled after router.js) import Vue from 'vue';import Router from' vue-router'; Vue.use (Router) Export default new Router ({routes: [{path: "/", name: "home", component: () = > import (/ * webpackChunkName: "home" * / ".. / views/Home.vue"), meta: {title: "Home"}},],}) Login.vue (modelled on App.vue) export default {data () {return {}

(3) configure vue.config.js

Add entry configuration to module.exports:

Pages: {/ / configure multi-page entry login: {entry: 'src/login/login.main.js', template:' public/login.html',}, index: {entry: 'src/main.js', template:' public/index.html' },}

Finally, visit localhost:port/login.html/#/.

This is the end of the content of "how to use the vue-cli3 project to build a multi-page mode". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.