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+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
Vue组件的使用教程详解
Jan 05 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 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
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
详解vue 组件注册
2020/11/20 Vue.js
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
企业文化建设实施方案
2014/03/22 职场文书
活动宣传策划方案
2014/05/23 职场文书
个人委托书范本汇总
2014/10/01 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
商务宴会祝酒词
2015/08/11 职场文书
教师远程培训心得体会
2016/01/09 职场文书
导游词之青城山景区
2019/09/27 职场文书