vue多頁面自動化編譯

基于vue-cli3的自動化多頁面模板,在網(wǎng)上資源文章及自己需求的推動下,可以各頁面獨立資源分文件夾編譯和原生所有資源統(tǒng)一編譯.

正文

大家可以直接使用我改好的初始模板.

自己搭建

  1. 創(chuàng)建自動化腳本
    在項目根目錄創(chuàng)建script文件夾,里面創(chuàng)建兩個文件splitBuild.js和getPages.js.

getPages.js

// getPages.js 自動獲取目錄結(jié)構(gòu)
const glob = require('glob')
let pages = {}
module.exports.pages = function () {
  glob.sync('./src/pages/*/*.js').forEach(filepath => {
    let fileList = filepath.split('/')
    let fileName = fileList[fileList.length - 2]
    pages[fileName] = {
      entry: `src/pages/${fileName}/${fileName}.js`,
      // 模板來源
      template: `src/pages/${fileName}/${fileName}.html`,
      // 在 dist/index.html 的輸出
      filename: process.env.VUE_APP_TITLE !== 'ps' ? `${fileName}.html` : `${fileName}/${fileName}.html`,
      // 提取出來的通用 chunk 和 vendor chunk号涯。
      chunks: ['chunk-vendors', 'chunk-common', fileName]
    }
  })
  return pages
}

splitBuild.js

// splitBuild.js 分開編譯資源處理腳本
var fs = require('fs')
const glob = require('glob')
const config = require('../vue.config.js')

const publicPath = config.publicPath || ''
const outputDir = config.outputDir || 'dist'
/**
 * js文件copy
 * @param src
 * @param dst
 */
var callbackFileJs = function (src, dst) {
  fs.readFile(src, 'utf8', function (error, data) {
    if (error) {
      // eslint-disable-next-line no-console
      console.log(error)
      return false
    }
    fs.writeFile(dst, data.toString(), 'utf8', function (error) {
      if (error) {
        // eslint-disable-next-line no-console
        console.log(error)
        return false
      }
      if (dst.includes('.map')) {
        // let srcName = src.split('/')[4]
        // fs.unlink(`./${outputDir}/js/${srcName}.map`,function () { // 刪除map
        // })
        // fs.unlink(`./${outputDir}/js/${srcName}`,function () { // 刪除js
        // })
      } else { // JS寫入成功
        callbackFileJs(dst, `${dst}.map`)
      }
    })
  })
}
// 復(fù)制目錄
glob.sync(`./${outputDir}/js/*.js`).forEach((filepath, name) => {
  let fileNameList = filepath.split('.')
  let fileName = fileNameList[1].split('/')[3]// 多頁面頁面目錄
  let copyName = filepath.split('/')[3]
  let changeDirectory = `./${outputDir}/${fileName}/js`// 多頁面JS文件地存放址
  if (!fileName.includes('chunk-')) {
    // eslint-disable-next-line
    fs.exists(changeDirectory, function (exists) {
      if (exists) {
        // console.log(`${fileName}下JS文件已經(jīng)存在`)
        callbackFileJs(filepath, `${changeDirectory}/${copyName}`)
      } else {
        fs.mkdir(changeDirectory, function () {
          callbackFileJs(filepath, `${changeDirectory}/${copyName}`)
          // console.log(`${fileName}下JS文件創(chuàng)建成功`)
        })
      }
    })
  }
})

/**
 * css文件拷貝
 * @param src
 * @param dst
 */
var callbackFileCss = function (src, dst) {
  fs.readFile(src, 'utf8', function (error, data) {
    if (error) {
      // eslint-disable-next-line no-console
      console.log(error)
      return false
    }
    fs.writeFile(dst, data.toString(), 'utf8', function (error) {
      if (error) {
        // eslint-disable-next-line no-console
        console.log(error)
        PromiseRejectionEvent(error)
        return false
      }
      // console.log('CSS寫入成功')
      fs.unlink(src, function () { // css刪除成功
      })
    })
  })
}
// 復(fù)制目錄
glob.sync(`./${outputDir}/css/*.css`).forEach((filepath, name) => {
  let fileNameList = filepath.split('.')
  let fileName = fileNameList[1].split('/')[3]// 多頁面頁面目錄
  let copyName = filepath.split('/')[3]
  let changeDirectory = `./${outputDir}/${fileName}/css`// 多頁面JS文件地存放址
  if (!fileName.includes('chunk-')) {
    /* eslint-disable-next-line */
    fs.exists(changeDirectory, function (exists) {
      if (exists) {
        // console.log(`${fileName}下CSS文件已經(jīng)存在`)
        callbackFileCss(filepath, `${changeDirectory}/${copyName}`)
      } else {
        fs.mkdir(changeDirectory, function () {
          callbackFileCss(filepath, `${changeDirectory}/${copyName}`)
          //   console.log(`${fileName}下CSS文件創(chuàng)建成功`)
        })
      }
    })
  }
})

/**
 * html文件替換
 * @param src
 * @param dst
 */
var callbackFile = function (src, dst, name, filepath) {
  const index = publicPath.lastIndexOf('/')
  let pt = publicPath
  if (index !== -1) {
    const count = publicPath.length
    if (index + 1 === count) {
      pt = publicPath.slice(0, index - 1)
    }
  }

  fs.readFile(src, 'utf8', function (error, data) {
    if (error) {
      // eslint-disable-next-line no-console
      console.log(error)
      return false
    }
    let regCss = new RegExp(pt + '/css/' + name + '', 'g')
    let regJs = new RegExp(pt + '/js/' + name + '', 'g')
    let htmlContent = data.toString().replace(regCss, `./css/${name}`).replace(regJs, `./js/${name}`)
    fs.writeFile(dst, htmlContent, 'utf8', function (error) {
      if (error) {
        // eslint-disable-next-line no-console
        console.log(error)
        return false
      }
      // console.log('html重新寫入成功')
      if (src.indexOf('/index.html') === -1) {
        fs.unlink(src, function () {
          //  console.log('html刪除成功')
        })
      }
      fs.unlink(filepath, function () { // css刪除成功
      })
      fs.unlink(filepath + '.map', function () { // css刪除成功
      })
    })
  })
}
// 復(fù)制目錄
glob.sync(`./${outputDir}/js/*.js`).forEach((filepath, name) => {
  let fileNameList = filepath.split('.')
  let fileName = fileNameList[1].split('/')[3]// 多頁面頁面目錄
  let thisDirectory = `./${outputDir}/${fileName}/${fileName}.html`// 多頁面JS文件地存放址
  let changeDirectory = `./${outputDir}/${fileName}/index.html`// 多頁面JS文件地存放址
  if (!fileName.includes('chunk-')) {
    callbackFile(thisDirectory, changeDirectory, fileName, filepath)
  }
})

config配置

// vue.config.js
let pageMethod = require('./script/getPages.js')
const pages = pageMethod.pages()
// build-s編譯不能將publicPath設(shè)置為'./'或'',會導(dǎo)致相對路徑資源路徑混亂
module.exports = {
  pages,
  publicPath: '/',
  outputDir: 'dist'
}

package.json

{
  ...
  "scripts": {
    "serve": "vue-cli-service serve --open ",
    "build-s": "vue-cli-service build --mode ps && node script/splitBuild.js",
    "build": "vue-cli-service build",
    ...
  },
    ...
}

使用說明

  1. 在src中創(chuàng)建pages文件夾


    title

  2. pages中創(chuàng)建的每一個文件夾就是一個單頁面目錄


    title

  3. 我們在對應(yīng)單頁面目錄里創(chuàng)建對應(yīng)html,vue及js文件即可.


    title
// html 就是頁面的初始html(傳統(tǒng)項目一般在public里面)
<!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>hello-world</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but hello-world 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>

// js文件  項目初始化js
import Vue from 'vue'
import App from './index.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

<template>
  <div id="app">
    <img alt="Vue logo" src="../../assets/logo.png">
    <p>頁面2URL：http://localhost:8080/index2/</p>
  </div>
</template>

<script>
// vue主頁面
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

不足之處,歡迎訪問DLLCN的學(xué)習(xí)筆記進行批評與討論,一起成長,一起學(xué)習(xí).

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末目胡，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子链快，更是在濱河造成了極大的恐慌誉己，老刑警劉巖，帶你破解...
    沈念sama閱讀 217,826評論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件域蜗，死亡現(xiàn)場離奇詭異巨双，居然都是意外死亡，警方通過查閱死者的電腦和手機霉祸，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門筑累，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人丝蹭，你說我怎么就攤上這事慢宗。” “怎么了奔穿？”我有些...
    開封第一講書人閱讀 164,234評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵镜沽，是天一觀的道長。 經(jīng)常有香客問我贱田，道長缅茉，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,562評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任湘换，我火速辦了婚禮宾舅，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘彩倚。我一直安慰自己筹我，他們只是感情好，可當我...
    茶點故事閱讀 67,611評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布帆离。 她就那樣靜靜地躺著蔬蕊，像睡著了一般。 火紅的嫁衣襯著肌膚如雪哥谷。 梳的紋絲不亂的頭發(fā)上岸夯，一...
    開封第一講書人閱讀 51,482評論 1贊 302
  • 城市分裂傳說
    那天，我揣著相機與錄音们妥，去河邊找鬼猜扮。 笑死，一個胖子當著我的面吹牛监婶，可吹牛的內(nèi)容都是我干的旅赢。 我是一名探鬼主播齿桃，決...
    沈念sama閱讀 40,271評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼煮盼！你這毒婦竟也來了短纵？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,166評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤僵控，失蹤者是張志新（化名）和其女友劉穎香到，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體报破，經(jīng)...
    沈念sama閱讀 45,608評論 1贊 314
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡悠就，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了充易。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片理卑。...
    茶點故事閱讀 39,926評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖蔽氨，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情帆疟，我是刑警寧澤鹉究，帶...
    沈念sama閱讀 35,644評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站踪宠，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜脆烟，卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3贊 329
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一盅抚、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧柬脸，春花似錦他去、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0贊 22
  • 一樁弒父案灾测，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至垦巴，卻和暖如春媳搪，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背骤宣。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工秦爆， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人憔披。 一個月前我還...
    沈念sama閱讀 48,063評論 3贊 370
  • 代替公主和親
    正文 我出身青樓等限，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子精刷，可洞房花燭夜當晚...
    茶點故事閱讀 44,871評論 2贊 354