vue-cli分模塊獨立打包

基於vue-cli3多模塊獨立打包

一、目標

我們要實現什么？

所謂分模塊打包，也可以說一個項目一個模塊，理解：

在src目錄下，多個項目共用一些數據方法，但是每個項目有自己獨立的入口文件，路由文件，界面樣式都不同，可以單獨運行，單獨打包。

按照這種構想，我在一個新的腳手架src目錄下新建了一個projects目錄：

如上圖，可以看到Aproject、B、C、D四個項目。我在A項目中建了assets，common和views文件夾，其中assets可以再建img和css的文件夾，common內可以放公共組件或者方法，views頁面可以放頁面，甚至你還可以建一個components文件夾專門用來放組件。

好了，我們的視圖目錄結構大概就是上面的樣子。我們期待的是，我們可以打包這個A模塊這個‘小vue’，就像打包一個完整vue的項目一樣。那么如何實現這部分呢？

 

最主要是在vue.config.js配置里，通過控制入口文件的路徑和輸出的路徑實現，分模塊打包

const configJSON = require('./Config11.js')

const tmp = configJSON.tenant.split('_')
const tenanKey = tmp[0] + '_' + tmp[1] + '_' + tmp[2]
const tenantPath = tmp[0] + '_' + tmp[1] + '/' + tmp[2]
// console.log("配置信息" + JSON.stringify(tenanKey))
let projectConfig;
if (tenanKey) {
    projectConfig = {
        pages: {
            index: {
                entry: `src/projects/${tenantPath}/main.js`,
                outputDir: `dist/${tenanKey}`,
                title: configJSON.title,
                filename: 'index.html',
                template: 'public/index.html'
            }
        }

        // 更多...
    }
} else {
    // console.log("請輸入正確的配置信息")
}

// console.log("配置信息" + JSON.stringify(projectConfig));


module.exports = {
    pages: projectConfig.pages,
    lintOnSave: false
}

 

 

————————————————
參考鏈接：https://blog.csdn.net/Oralinge/article/details/103813020

　　　　　https://segmentfault.com/a/1190000014571631?utm_source=tag-newest

　　　　　https://segmentfault.com/a/1190000009543196

　　　　　https://www.cnblogs.com/mmzuo-798/p/12264261.html