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

时间：2021-05-26

为何需要配置多页面?

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

而因为脚手架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与jsfunction 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://patible" 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

运行

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章