VUE.CLI4.0配置多页面入口的实现


Posted in Javascript onNovember 25, 2019

为何需要配置多页面?

在实际工作中,肯定会遇到大型项目,往往一个架构里面会开发多个应用,而这些应用又没有太大的关联,但有可能会共用一些组件或者是样式表等,那么就会出现一个问题,打包的时候会将这些互不相关的应用全部打包。

而因为脚手架VueCli所以构建的项目属于单页面应用,因此我们就需要手动去配置,搭建一个多入口,多应用的体系

需求

首页显示各个应用名称,点击进去各自应用

实现

使用vue/cli生成一个vue项目

npm install -g @vue/cli 个人不建议直接全局安装,因为可能会对其他项目造成影响,所以会选择加上 -D 来进行本地安装

然后 vue create project-name (使用本地安装的记得加上 npx

VUE.CLI4.0配置多页面入口的实现 

成功创建之后,我们看看当前的目录结构

VUE.CLI4.0配置多页面入口的实现 

这里我们需要重构一下我们的目录 让他更可观

VUE.CLI4.0配置多页面入口的实现 

配置vue.config.js

let path = require('path')
let glob = require('glob') // 用于筛选文件

// 工厂函数 - 配置pages实现多页面获取某文件夹下的html与js
function handleEntry(entry) {
 let entries = {}
 let entryBaseName = ''
 let entryPathName = ''
 let entryTemplate = ''
 let applicationName = ''

 glob.sync(entry).forEach(item => {
  console.log('!!!', item)
  entryBaseName = path.basename(item, path.extname(item))
  console.log('entryBaseName:', entryBaseName)
  entryTemplate = item.split('/').splice(-3)
  console.log('entryTemplate:', entryTemplate)
  entryPathName = entryBaseName // 正确输出js和html的路径
  console.log('entryPathName', entryPathName)

  entries[entryPathName] = {
   entry: 'src/' + entryTemplate[0] + '/' + entryTemplate[1] + '/' + entryTemplate[1] + '.js',
   template: 'src/' + entryTemplate[0] + '/' + entryTemplate[1] + '/' + entryTemplate[2],
   title: entryTemplate[2],
   filename: entryTemplate[2]
  }
 })

 return entries
}

let pages = handleEntry('./src/applications/**?/*.html')
console.log(pages)

// 以下开始配置
module.exports = {
 lintOnSave: false, // 关掉eslint
 /**
  * baseUrl 从 3.3起废用,使用pubilcPath代替
  * 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。
  * 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中。
  */
 publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
 productionSourceMap: false,
 // 入口设置
 pages,
 devServer: {
  index: '/', // 运行时,默认打开application1页面
  // 告诉dev-server在服务器启动后打开浏览器,将其设置true为打开默认浏览器
  open: true,
  host: 'localhost',
  port: 8080,
  https: false,
  hotOnly: false,
  // 配置首页 入口链接
  before: app => {
   app.get('/', (req, res, next) => {
    for (let i in pages) {
     res.write(`<a target="_self" href="/${i}">/${i}</a></br>`);
    }
    res.end()
   });
  }
 }
}
application1.js
import Vue from 'vue'
import Application1 from './application1.vue'
import router from './router'
import store from './vuex'

Vue.config.productionTip = false

new Vue({
 router,
 store,
 render: h => h(Application1)
}).$mount('#app')
application1.vue

<template>
 <div id="app">
  <a class='tips' href='application2.html'>
  Hello Im Application1,Clike me can go to Application2
  </a>
 </div>
</template>

<style lang="less">
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}

.tips{
 display: flex;
 justify-content: center;
 align-items:center;
 color:lightsalmon;
 font-size:20px;
 font-weight:bold;
}

</style>
application1.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>Application1</title>
</head>

<body>
 <noscript>
  <strong>We're sorry but test-my-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
</body>

</html>

同理 application2应用也这样配置 运行

npm run serve

运行

VUE.CLI4.0配置多页面入口的实现 

VUE.CLI4.0配置多页面入口的实现

VUE.CLI4.0配置多页面入口的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
用Golang运行JavaScript的实现示例
Nov 25 #Javascript
JS插入排序简单理解与实现方法分析
Nov 25 #Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 #Javascript
python实现迭代法求方程组的根过程解析
Nov 25 #Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 #Javascript
JavaScript交换两个变量方法实例
Nov 25 #Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 #Javascript
You might like
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
基于PHP文件操作的详解
2013/06/05 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
Javascript之String对象详解
2016/06/08 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
医学生求职自荐信
2013/10/25 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
离婚起诉状范本
2015/05/19 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
聊一聊python常用的编程模块
2021/05/14 Python