admin管理员组

文章数量:1633774

很久之前就想去配置一个非单页面的登陆页面，一直到今天才完成

我将给出最简单的代码，完成最基本的配置。需要更强的功能自己去加上

效果如下

第一步：创建登陆页面的文件
1-1：login.html

<!DOCTYPE html>
<html lang="en">  
	<head>    
	<meta charset="utf-8">    
	<meta http-equiv="X-UA-Compatible" content="IE=edge">    
	<meta name="viewport" content="width=device-width,initial-scale=1.0">    
	<link rel="icon" href="<%= BASE_URL %>favicon.ico">    
	<title>login</title>  
	</head>  
	<body>    
		<div id="login"></div>  
	</body>
</html>
1-2:login.main.js login.router.js login.vue


login.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

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({  mode: 'history',  base: process.env.BASE_URL,  routes: [      ],});

login.vue

<template>    
	<a href="/"> 登陆</a>
</template>
<script>
	export default {    }
</script>
<style lang="less" scoped>
</style>
第二步：配置 vue.config.js

const baseUrl = '/';

before: function(app) {          
	const base = baseUrl.replace(/\/+$/, ''); // 移除尾部斜杠          
		app.get(`${base}/:page/*`, function(req, res, next) {            
		if (['login', 'index'].includes(req.params.page)) {              
		// 把 /<base>/<page>/* 重定向到 /<base>/<page>/              
		req.url = `${base}/${req.params.page}/`;              
		next('route');            
		} else {              
			next();            
		}          
	});        
},

pages: {        
	login: {          
		entry: 'src/login/login.main.js',          
		template: 'public/login.html',        
	},        
	index: {          
		entry: 'src/main.js',          
		template: 'public/index.html',        
	},    
},

本文标签： 入口多页页面vue

版权声明：本文标题：Vue配置多页面，多入口【vue-cli3 配置登陆页面】 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1729177724a1188928.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。