成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于Vue-cli的一套代碼支持多個(gè)項(xiàng)目的解決方案

SQC / 1961人閱讀

摘要：基于的一套代碼支持多個(gè)項(xiàng)目的解決方案應(yīng)用場(chǎng)景在端業(yè)務(wù)中，同樣的產(chǎn)品，客戶多多少少會(huì)要求一些定制化。那么，是否可以一套代碼支持多個(gè)項(xiàng)目呢前段時(shí)間，接了一個(gè)需求，技術(shù)選型是，用搭建的。在這個(gè)場(chǎng)景下研究了一下解決方案。

基于Vue-cli的一套代碼支持多個(gè)項(xiàng)目的解決方案 應(yīng)用場(chǎng)景

在toB端業(yè)務(wù)中，同樣的產(chǎn)品，客戶多多少少會(huì)要求一些定制化。從皮膚，圖片，到一些小的功能的差異。
前端總是沖在最前面需要改的。如果改動(dòng)不大的話，拉個(gè)分支有增加了維護(hù)的成本，分支拉多了，如果主干有一個(gè)問題相當(dāng)于copy了n份，那個(gè)滋味簡(jiǎn)直不要太酸爽。那么，是否可以一套代碼支持多個(gè)項(xiàng)目呢？

前段時(shí)間，接了一個(gè)需求，技術(shù)選型是VUE，用vue-cli搭建的。一套代碼需要支持10幾家客戶，每家的皮膚，功能都有一些小的差異，主體流程大致是一樣的。在這個(gè)場(chǎng)景下研究了一下解決方案。

思路

總體的思路模塊化，然后在編譯的時(shí)候根據(jù)輸入命令直接組裝不同的模塊，打包出我們需要的頁面。
這個(gè)地方就有兩個(gè)問題：

1.如何劃分頁面，控制組件的顆粒度？

2.如何差異化編譯？

項(xiàng)目結(jié)構(gòu)

同樣一個(gè)頁面，有相同的部分，也有一些不一樣的部分。vue本身的組件化思想很容易讓我們想到把頁面拆分成組件，然后把公共的提取出來，差異化的分別處理。

項(xiàng)目總體結(jié)構(gòu)

build

build結(jié)構(gòu)中主要是webpack的一些腳本配置

config

config文件主要是項(xiàng)目相關(guān)配置，我們常用的就是當(dāng)端口沖突時(shí)配置監(jiān)聽端口，打包輸出路徑及命名等

src

源碼文件。

assets:靜態(tài)資源，一般放圖片，樣式等

less：樣式文件，這里分主題處理了

pages：頁面文件

router：路由

util：工具類

components

文件夾中是各個(gè)項(xiàng)目的自有的組件。components目錄下的是公共的組件

static

靜態(tài)資源，不會(huì)被webpack編譯。一般放一下外部引用文件。

webpack打包配置 如何差異化編譯？

1.cross-env使用環(huán)境變量。在編譯階段，根據(jù)編譯傳入的變量不同，編譯不同的組件。
首先，要改的是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"
  },

這個(gè)時(shí)候我們編譯的時(shí)候輸入對(duì)應(yīng)的命令 就可以傳入相應(yīng)的環(huán)境變量。
eg：npm run dev:gx 會(huì)傳入BRANCH_ENV=gx。

2.把config/prod.env.js中注入這個(gè)環(huán)境變量

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

可以看的出，我們把編譯命令注入的環(huán)境變量在引入別名的時(shí)候用上了。比如說，假設(shè)我輸入的編譯命令是

npm run build:gx

這個(gè)時(shí)候

"assets": path.resolve(__dirname, "../src/assets/images/"+process.env.BRANCH_ENV)
//等同于
"assets": path.resolve(__dirname, "../src/assets/images/gx")
頁面引用 1.圖片引用 

//根據(jù)編譯命令。圖片引用的是src/assets/images/gx/arrow.png

background: url(~assets/btn_1.png) no-repeat;

ps:用別名的時(shí)候記得要加上~號(hào)

2.組件引用 
//公共組件
import ruleTitle from "components/RuleTitle"
//差異化組件
import ruleContent from "componentsDif/RuleContent"
總結(jié)

總而言之，核心思想就是跟進(jìn)編譯命令傳入環(huán)境變量，利用環(huán)境變量和別名的配置來差異化打包。比較難的是如何控制組件的顆粒度，如何拆分組件，這個(gè)需要跟據(jù)需求的不同來實(shí)際定制。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95784.html

相關(guān)文章

  • 第三方庫

    摘要：微信支付，支付寶支付，銀聯(lián)支付三大支付總結(jié)支付寶植入總結(jié)支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個(gè)庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡(jiǎn)單入門教程 強(qiáng)大輕量的動(dòng)畫庫 anime.js 入門教程 來自B站的開源的MagicaSakura源...

    seanHai 評(píng)論0 收藏0

  • 第三方庫

    摘要：微信支付，支付寶支付，銀聯(lián)支付三大支付總結(jié)支付寶植入總結(jié)支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個(gè)庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡(jiǎn)單入門教程 強(qiáng)大輕量的動(dòng)畫庫 anime.js 入門教程 來自B站的開源的MagicaSakura源...

    gityuan 評(píng)論0 收藏0

  • 前端相關(guān)大雜燴

    摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒有網(wǎng)絡(luò)請(qǐng)求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址：Learning React.js is easier than you think 原文作...

    fuyi501 評(píng)論0 收藏0

  • 《從零構(gòu)建前后分離的web項(xiàng)目》實(shí)戰(zhàn) -5分鐘快速構(gòu)建炒雞規(guī)范的VUE項(xiàng)目骨架

    摘要：可以使用或來安裝我用來重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個(gè)畫面，安裝完成了。 初步搭建腳手架 Tips 任何不錯(cuò)的開源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。 什么是 CLI 命令行界面（英語：command-li...

    qieangel2013 評(píng)論0 收藏0

  • 《從零構(gòu)建前后分離的web項(xiàng)目》實(shí)戰(zhàn) -5分鐘快速構(gòu)建炒雞規(guī)范的VUE項(xiàng)目骨架

    摘要：可以使用或來安裝我用來重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個(gè)畫面，安裝完成了。 初步搭建腳手架 Tips 任何不錯(cuò)的開源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。 什么是 CLI 命令行界面（英語：command-li...

    kel 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<