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

2024-04-16 16:08

本文主要是介绍Vue配置多页面,多入口【vue-cli3 配置登陆页面】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

效果如下

在这里插入图片描述

第一步:创建登陆页面的文件
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-cli3 配置登陆页面】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/909267

相关文章

Linux下进程的CPU配置与线程绑定过程

《Linux下进程的CPU配置与线程绑定过程》本文介绍Linux系统中基于进程和线程的CPU配置方法,通过taskset命令和pthread库调整亲和力,将进程/线程绑定到特定CPU核心以优化资源分配... 目录1 基于进程的CPU配置1.1 对CPU亲和力的配置1.2 绑定进程到指定CPU核上运行2 基于

Spring Boot spring-boot-maven-plugin 参数配置详解(最新推荐)

《SpringBootspring-boot-maven-plugin参数配置详解(最新推荐)》文章介绍了SpringBootMaven插件的5个核心目标(repackage、run、start... 目录一 spring-boot-maven-plugin 插件的5个Goals二 应用场景1 重新打包应用

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

Jenkins分布式集群配置方式

《Jenkins分布式集群配置方式》:本文主要介绍Jenkins分布式集群配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装jenkins2.配置集群总结Jenkins是一个开源项目,它提供了一个容易使用的持续集成系统,并且提供了大量的plugin满

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Linux中SSH服务配置的全面指南

《Linux中SSH服务配置的全面指南》作为网络安全工程师,SSH(SecureShell)服务的安全配置是我们日常工作中不可忽视的重要环节,本文将从基础配置到高级安全加固,全面解析SSH服务的各项参... 目录概述基础配置详解端口与监听设置主机密钥配置认证机制强化禁用密码认证禁止root直接登录实现双因素

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置(1)、下载安装SQLite库(2)、解压下载的文件(3)、

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)