VUE.CLI4.0配置多页面入口的实现

更新时间：2019年11月25日 10:49:14 作者：CHICAGO

这篇文章主要介绍了VUE.CLI4.0配置多页面入口的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

为何需要配置多页面?

在实际工作中，肯定会遇到大型项目，往往一个架构里面会开发多个应用，而这些应用又没有太大的关联，但有可能会共用一些组件或者是样式表等，那么就会出现一个问题，打包的时候会将这些互不相关的应用全部打包。

而因为脚手架VueCli所以构建的项目属于单页面应用，因此我们就需要手动去配置，搭建一个多入口，多应用的体系

需求

首页显示各个应用名称，点击进去各自应用

实现

使用vue/cli生成一个vue项目

npm install -g @vue/cli 个人不建议直接全局安装，因为可能会对其他项目造成影响，所以会选择加上 -D 来进行本地安装

然后 vue create project-name （使用本地安装的记得加上 npx ）

成功创建之后，我们看看当前的目录结构

这里我们需要重构一下我们的目录让他更可观

配置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双向绑定详解
这篇文章主要介绍了Vue 实现双向绑定的四种方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能够给你带来帮助
2021-11-11
vue 自定义全局方法,在组件里面的使用介绍
下面小编就为大家介绍一下vue 自定义全局方法,在组件里面的使用。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
Vue3中使用Element Plus时el-icon无法显示的问题解决
我们的Vue前端一般都是用的ElementUI,其中按钮可能用到的比较多,官方里面有自带的一些默认图标,下面这篇文章主要给大家介绍了关于Vue3中使用Element Plus时el-icon无法显示的问题解决,需要的朋友可以参考下
2022-03-03
Vue3使用ref解决GetElementById为空的问题
今天遇到一个问题,就是在Vue3组件中需要获取template中的元素节点,使用GetElementById返回的却是null,网上查找了好些资料,才发需要使用ref,所以本文给大家介绍了Vue3组件中如何使用ref解决GetElementById为空的问题,需要的朋友可以参考下
2023-12-12
webpack+vue-cli项目中引入外部非模块格式js的方法
今天小编就为大家分享一篇webpack+vue-cli项目中引入外部非模块格式js的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue：左右过渡展开折叠的组件
在网上找了好久关于左右过渡动画折叠的组件,没有合适的代码,效果类似于element UI中的Drawer抽屉组件,只不过ele中的都是悬浮的组件,工作中遇到的很多都是占用空间的展开折叠,网上很多也是上下展开收起的组件,于是就自己写了一个,分享给大家,感兴趣的朋友参考下吧
2023-11-11
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
这篇文章主要介绍了使用VUE实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09
vue+高德地图写地图选址组件的方法
这篇文章主要介绍了vue+高德地图写地图选址组件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
如何封装一个类似微信通讯录带有字母检索功能的vue组件
这篇文章主要介绍了如何封装一个类似微信通讯录带有字母检索功能的vue组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
基于Vue实例生命周期(全面解析)
下面小编就为大家带来一篇基于Vue实例生命周期(全面解析)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08

VUE.CLI4.0配置多页面入口的实现

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具