VUE.CLI 4.0 配置多頁面入口禮包送你！

時間 2019-11-24

標籤 vue.cli vue cli 4.0 配置頁面入口简体版

原文原文鏈接

爲什麼須要配置多頁面?

在實際工做中，確定會遇到大型項目，每每一個架構裏面會開發多個應用，而這些應用又沒有太大的關聯，但有可能會共用一些組件或者是樣式表等，那麼就會出現一個問題，打包的時候會將這些互不相關的應用所有打包。html

而由於腳手架VueCli因此構建的項目屬於單頁面應用，所以咱們就須要手動去配置，搭建一個多入口，多應用的體系vue

需求

首頁顯示各個應用名稱，點擊進去各自應用

實現

使用vue/cli生成一個vue項目

npm install -g @vue/cli 我的不建議直接全局安裝，由於可能會對其餘項目形成影響，因此會選擇加上-D來進行本地安裝git

而後vue create project-name（使用本地安裝的記得加上npx）github

成功建立以後，咱們看看當前的目錄結構web

這裏咱們須要重構一下咱們的目錄讓他更可觀

配置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>
複製代碼