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 相关文章推荐
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
Vue底层实现原理总结
Feb 17 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 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
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php header示例代码(推荐)
2010/09/08 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
php验证码生成代码
2015/11/11 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
JavaScript 指导方针
2007/04/05 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
python实现随机加减法生成器
2020/02/24 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
优秀学生获奖感言
2014/02/15 职场文书
毕业生找工作求职信
2014/08/05 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
秋冬农业生产标语
2014/10/09 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
关于倡议书的范文
2015/04/29 职场文书
房屋所有权证明
2015/06/19 职场文书
结婚主持人致辞
2015/07/28 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android