VUE.CLI4.0配置多頁面入口的實現(xiàn)
更新時間：2019年11月25日 10:49:14 作者：CHICAGO
這篇文章主要介紹了VUE.CLI4.0配置多頁面入口的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
為何需要配置多頁面?
在實際工作中，肯定會遇到大型項目，往往一個架構里面會開發(fā)多個應用，而這些應用又沒有太大的關聯(lián)，但有可能會共用一些組件或者是樣式表等，那么就會出現(xiàn)一個問題，打包的時候會將這些互不相關的應用全部打包。
而因為腳手架VueCli所以構建的項目屬于單頁面應用，因此我們就需要手動去配置，搭建一個多入口，多應用的體系
需求
首頁顯示各個應用名稱，點擊進去各自應用
實現(xiàn)
使用vue/cli生成一個vue項目
npm install -g @vue/cli 個人不建議直接全局安裝，因為可能會對其他項目造成影響，所以會選擇加上 -D 來進行本地安裝
然后 vue create project-name （使用本地安裝的記得加上 npx ）
成功創(chuàng)建之后，我們看看當前的目錄結構
這里我們需要重構一下我們的目錄 讓他更可觀
配置vue.config.js
let path = require('path')
let glob = require('glob') // 用于篩選文件
// 工廠函數(shù) - 配置pages實現(xiàn)多頁面獲取某文件夾下的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 應用的文件系統(tǒng)中。
*/
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 實現(xiàn)雙向綁定的四種方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧，希望能夠給你帶來幫助2021-11-11
下面小編就為大家介紹一下vue 自定義全局方法,在組件里面的使用。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue3中使用Element?Plus時el-icon無法顯示的問題解決
我們的Vue前端一般都是用的ElementUI,其中按鈕可能用到的比較多,官方里面有自帶的一些默認圖標,下面這篇文章主要給大家介紹了關于Vue3中使用Element?Plus時el-icon無法顯示的問題解決,需要的朋友可以參考下2022-03-03
Vue3使用ref解決GetElementById為空的問題
今天遇到一個問題,就是在Vue3組件中需要獲取template中的元素節(jié)點,使用GetElementById返回的卻是null,網(wǎng)上查找了好些資料,才發(fā)需要使用ref,所以本文給大家介紹了Vue3組件中如何使用ref解決GetElementById為空的問題,需要的朋友可以參考下2023-12-12
webpack+vue-cli項目中引入外部非模塊格式js的方法
今天小編就為大家分享一篇webpack+vue-cli項目中引入外部非模塊格式js的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在網(wǎng)上找了好久關于左右過渡動畫折疊的組件,沒有合適的代碼,效果類似于element UI中的Drawer抽屜組件,只不過ele中的都是懸浮的組件,工作中遇到的很多都是占用空間的展開折疊,網(wǎng)上很多也是上下展開收起的組件,于是就自己寫了一個,分享給大家,感興趣的朋友參考下吧2023-11-11
使用VUE實現(xiàn)在table中文字信息超過5個隱藏鼠標移到時彈窗顯示全部
這篇文章主要介紹了使用VUE實現(xiàn)在table中文字信息超過5個隱藏，鼠標移到時彈窗顯示全部,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue+高德地圖寫地圖選址組件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了如何封裝一個類似微信通訊錄帶有字母檢索功能的vue組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
下面小編就為大家?guī)硪黄赩ue實例生命周期(全面解析)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08