vue-cli3配置多項(xiàng)目并按項(xiàng)目分別實(shí)現(xiàn)打包

更新時(shí)間：2023年01月14日 08:56:25 作者：lmy233

這篇文章主要介紹了vue-cli3配置多項(xiàng)目并按項(xiàng)目分別實(shí)現(xiàn)打包方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue-cli3配置多項(xiàng)目并按項(xiàng)目分別打包

demo地址：https://github.com/lmy01/vue-multipage

本次項(xiàng)目由于分為客戶端和客服端，第一反應(yīng)便是在vue中構(gòu)建多頁面。

項(xiàng)目結(jié)構(gòu)

這里主要講解下面所標(biāo)文件的用處

vue.config.js相關(guān)配置

配置好之后，運(yùn)行npm run build，項(xiàng)目被打包到dist文件夾下，結(jié)果如下圖：

可以看出不同項(xiàng)目的資源都會(huì)打包到了一起，但這不是我想要的結(jié)果，那么接下來只需要修改一下vue.config.js配置，即可使打包的文件按照項(xiàng)目進(jìn)行分離。

let projectName = process.argv[3]
let glob = require('glob')

function getEntry() {
  let entries = {}
  if (process.env.NODE_ENV == 'production') {
    entries = {
      index: {
        // page的入口
        entry: 'src/views/' + projectName + '/'+projectName+'.js',
        // 模板來源
        template: 'public/'+projectName+'.html',
        // 在 dist/index.html 的輸出
        filename: 'index.html',
        title: 'CIMS--'+projectName,
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      }
    }
  } else {
    let items = glob.sync( './src/views/*/*.js')
    for (let i in items) {
      let filepath = items[i]
      let fileList = filepath.split('/');
      let fileName = fileList[fileList.length-2];
      entries[fileName] = {
        entry: `src/views/${fileName}/${fileName}.js`,
        // 模板來源
        template: `public/${fileName}.html`,
        // 在 dist/index.html 的輸出
        filename: `${fileName}.html`,
        title:`CIMS--${fileName}`,
        // 提取出來的通用 chunk 和 vendor chunk。
        chunks: ['chunk-vendors', 'chunk-common', fileName]
      }
    }
  }
  return entries
}

let pages = getEntry()

module.exports = {

    outputDir: 'dist/' + projectName,
    productionSourceMap: false,
    pages:pages,
}

注意

這時(shí)候再打包需要逐個(gè)對項(xiàng)目進(jìn)行打包，npm run build client npm run build console

下面就是打包后的每個(gè)項(xiàng)目文件夾下的文件。

但是我們發(fā)現(xiàn)public里面的模板文件也被打包進(jìn)來了，這是因?yàn)閜ublic是專門存放靜態(tài)文件的，打包的時(shí)候會(huì)把public里的內(nèi)容原樣輸出到打包后的文件夾中，如果我們不想讓他打包進(jìn)去，那么就把模板文件從public文件夾中拿出來，我們在項(xiàng)目根目錄下重新建一個(gè)文件夾（/html），用來存放這兩個(gè)模板文件。