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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
javascript 快速排序函数代码
May 30 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
js倒计时简单实现方法
Dec 17 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
TS 类型兼容教程示例详解
Sep 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
javascript实现微信分享
2014/12/23 Javascript
js查找节点的方法小结
2015/01/13 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
python中 chr unichr ord函数的实例详解
2017/08/06 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
小型女装店的创业计划书
2014/01/09 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
电力工程合作意向书
2015/05/11 职场文书
计算机教师工作总结
2015/08/13 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
python必学知识之文件操作(建议收藏)
2021/05/30 Python
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript