基於Vuecli的一套代碼支撐多個項目的解決方案

運用場景

在toB端營業中，一樣的產物，客戶多多少少會請求一些定製化。從皮膚，圖片，到一些小的功用的差別。
前端老是沖在最前面須要改的。假如修改不大的話，拉個分支有增加了保護的本錢，分支拉多了，假如骨幹有一個題目相當於copy了n份，誰人味道幾乎不要太酸爽。那末，是不是能夠一套代碼支撐多個項目呢？

前段時間，接了一個需求，手藝選型是VUE，用vue-cli搭建的。一套代碼須要支撐10幾家客戶，每家的皮膚，功用都有一些小的差別，主體流程大抵是一樣的。在這個場景下研討了一下解決方案。

思緒

整體的思緒模塊化，然後在編譯的時刻依據輸入敕令直接組裝差別的模塊，打包出我們須要的頁面。
這個處所就有兩個題目：

1.怎樣離別頁面，掌握組件的顆粒度？

2.怎樣差別化編譯？

項目構造

一樣一個頁面，有雷同的部份，也有一些不一樣的部份。vue自身的組件化頭腦很輕易讓我們想到把頁面拆分成組件，然後把大眾的提取出來，差別化的離別處置懲罰。

項目整體構造

build

build構造中主如果webpack的一些劇本設置

config

config文件主如果項目相干設置，我們經常運用的就是當端口爭執時設置監聽端口，打包輸出途徑及定名等

src

源碼文件。

assets:靜態資本，平常放圖片，款式等

less：款式文件，這裏分主題處置懲罰了

pages：頁面文件

router：路由

util：東西類

components

文件夾中是各個項目的自有的組件。components目錄下的是大眾的組件

static

靜態資本，不會被webpack編譯。平常放一下外部援用文件。

webpack打包設置

怎樣差別化編譯？

1.cross-env運用環境變量。在編譯階段，依據編譯傳入的變量差別，編譯差別的組件。
起首，要改的是package.json的文件

"scripts": {
"dev:gx": "cross-env BRANCH_ENV=gx node build/dev-server.js",
"build:gx": "cross-env BRANCH_ENV=gx node build/build.js"
},

這個時刻我們編譯的時刻輸入對應的敕令 就能夠傳入響應的環境變量。
eg：npm run dev:gx 會傳入BRANCH_ENV=gx。

2.把config/prod.env.js中注入這個環境變量

module.exports = {
NODE_ENV: '"production"',
API_PATH:'""',
BRANCH_ENV: JSON.stringify(process.env.BRANCH_ENV) || '"base"',
ignoreCsrfToken:'"false"'
}

3.webpack.base.conf.js

resolve: {
extensions: ['', '.js', '.vue', '.json'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets/images/'+process.env.BRANCH_ENV),
'components': path.resolve(__dirname, '../src/components'),
'componentsDif': path.resolve(__dirname, '../src/components/'+process.env.BRANCH_ENV),
}
},

能夠看的出，我們把編譯敕令注入的環境變量在引入別號的時刻用上了。比如說，假定我輸入的編譯敕令是

npm run build:gx

這個時刻

'assets': path.resolve(__dirname, '../src/assets/images/'+process.env.BRANCH_ENV)
//等同於
'assets': path.resolve(__dirname, '../src/assets/images/gx')

頁面援用

1.圖片援用


//依據編譯敕令。圖片援用的是src/assets/images/gx/arrow.png
background: url(~assets/btn_1.png) no-repeat;

ps:用別號的時刻記得要加上~號

2.組件援用

//大眾組件
import ruleTitle from 'components/RuleTitle'
//差別化組件
import ruleContent from 'componentsDif/RuleContent'

總結

總而言之，中心頭腦就是跟進編譯敕令傳入環境變量，應用環境變量和別號的設置來差別化打包。比較難的是怎樣掌握組件的顆粒度，怎樣拆分組件，這個須要跟據需求的差別來現實定製。