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 巧妙去除数组中的重复项
Jan 25 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
JavaScript流程控制(循环)
Dec 06 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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
php建立Ftp连接的方法
2015/03/07 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
python之列表推导式的用法
2019/11/29 Python
python PIL模块的基本使用
2020/09/29 Python
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
Java的五个基础面试题
2016/02/26 面试题
教师实习期自我鉴定
2013/10/06 职场文书
大学生求职简历的自我评价
2013/10/14 职场文书
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
丑小鸭教学反思
2014/02/03 职场文书
教育技术职业规划范文
2014/03/04 职场文书
《穷人》教学反思
2014/04/08 职场文书
2014年绿化工作总结
2014/12/09 职场文书
地心历险记观后感
2015/06/15 职场文书
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android