vue-cli3配置多項目并按項目分別實現打包

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

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

vue-cli3配置多項目并按項目分別打包

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

本次項目由于分為客戶端和客服端，第一反應便是在vue中構建多頁面。

項目結構

這里主要講解下面所標文件的用處

vue.config.js相關配置

配置好之后，運行npm run build，項目被打包到dist文件夾下，結果如下圖：

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

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,
}

注意

這時候再打包需要逐個對項目進行打包，npm run build client npm run build console

下面就是打包后的每個項目文件夾下的文件。

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