基于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}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。