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 相关文章推荐
List Installed Software Features
Jun 11 Javascript
js或css实现滚动广告的几种方案
Jan 28 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
javascript操作数组详解
Dec 17 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 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
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
python 合并文件的具体实例
2013/08/08 Python
Python中的集合类型知识讲解
2015/08/19 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python os.access()用法实例
2019/02/18 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
如何使用Pytorch搭建模型
2020/10/26 Python
C#软件工程师英语面试题
2015/06/07 面试题
护士岗位职责
2014/02/16 职场文书
道路施工安全责任书
2014/07/24 职场文书
毕业横幅标语
2014/10/08 职场文书
行政二审代理词
2015/05/25 职场文书
企业文化学习心得体会
2016/01/21 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫