成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

SQC / 2008人閱讀

摘要：基于的一套代碼支持多個(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è)問(wèn)題相當(dāng)于copy了n份，那個(gè)滋味簡(jiǎn)直不要太酸爽。那么，是否可以一套代碼支持多個(gè)項(xiàng)目呢？

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

思路

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

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

2.如何差異化編譯？

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

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

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

build

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

config

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

src

源碼文件。

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

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

pages：頁(yè)面文件

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í)候用上了。比如說(shuō)，假設(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")
頁(yè)面引用 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)境變量和別名的配置來(lái)差異化打包。比較難的是如何控制組件的顆粒度，如何拆分組件，這個(gè)需要跟據(jù)需求的不同來(lái)實(shí)際定制。

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

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

相關(guān)文章

  • 第三方庫(kù)

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

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

  • 第三方庫(kù)

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

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

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

    摘要：希望幫助更多的前端愛(ài)好者學(xué)習(xí)。前端開(kāi)發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開(kāi)發(fā)工程師當(dāng)你問(wèn)起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒(méi)有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。 前端基礎(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)目骨架

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<