假如要单独将登陆页面当成一个项目入口文件：
第一步：创建一个登陆页面的文件
在项目public文件夹下创建一个login.html，其实就是将index.html复制一份，将title改一下：
第二步：在src文件夹下创建一个login文件夹，分别创建login.main.js、login.router.js、login.vue三个文件
三个文件内容如下：
login.main.js: 仿照main.js
import 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 (仿照router.js)
import Vue from ‘vue‘; import Router from ‘vue-router‘; Vue.use(Router); export default new Router({ mode: ‘history‘, base: process.env.BASE_URL, routes: [ { path: "/", name: "home", component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue"), meta:{ title:"首页" } }, ], });
login.vue (仿照App.vue)
<template> <div id="login"> {{text}} <router-view></router-view> </div> </template> <script> export default { data(){ return{ text:"登陆入口" } } } </script> <style scoped> </style>
第三步：配置vue.config.js
在module.exports里加上入口配置：
pages: {//配置多页面入口
login: {
entry: ‘src/login/login.main.js‘,
template: ‘public/login.html‘,
},
index: {
entry: ‘src/main.js‘,
template: ‘public/index.html‘,
},
},
然后运行访问：localhost:port/login.html即可
原文：https://www.cnblogs.com/fqh123/p/11981646.html