基于vue-cli3多模塊獨(dú)立打包

一、目標(biāo)

我們要實(shí)現(xiàn)什么？

所謂分模塊打包，也可以說(shuō)一個(gè)項(xiàng)目一個(gè)模塊，理解：

在src目錄下，多個(gè)項(xiàng)目共用一些數(shù)據(jù)方法，但是每個(gè)項(xiàng)目有自己獨(dú)立的入口文件，路由文件，界面樣式都不同，可以單獨(dú)運(yùn)行，單獨(dú)打包。

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

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

好了，我們的視圖目錄結(jié)構(gòu)大概就是上面的樣子。我們期待的是，我們可以打包這個(gè)A模塊這個(gè)‘小vue’，就像打包一個(gè)完整vue的項(xiàng)目一樣。那么如何實(shí)現(xiàn)這部分呢？

最主要是在vue.config.js配置里，通過(guò)控制入口文件的路徑和輸出的路徑實(shí)現(xiàn)，分模塊打包

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("請(qǐng)輸入正確的配置信息")

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

module.exports={

pages: projectConfig.pages,

lintOnSave:false}

總結(jié)

以上是生活随笔為你收集整理的vue 分模块打包 脚手架_vue-cli分模块独立打包的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。