Vue配置多页面，多入口【vue-cli3 配置登陆页面】

亦凉 2022-02-24 02:16 438阅读 0赞

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

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

**效果如下**

![在这里插入图片描述][20190402193541201.gif]

#### 第一步：创建登陆页面的文件 ####

###### 1-1：login.html ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]

<!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 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]  
**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 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]

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',        
    	},    
    },

[20190402193541201.gif]: /images/20220224/753f8b7aa9c54f94b968fd2d4f8d6619.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220224/88c34fc8e70c4304946a0ca5e85462b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20220224/ea97420be09d46968f3a86bb37a85ab6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: /images/20220224/55a701bebe014f37abb8598305b8abac.png