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

資訊專欄INFORMATION COLUMN

接口環(huán)境很多？靜態(tài)資源要放cdn？不用修改代碼，用webpack就可以（vue）

SoapEye / 2999人閱讀

摘要：傳送門針對(duì)解決的問題接口環(huán)境很多，有測(cè)試服，有，有正式等等，每次都要修改代碼靜態(tài)資源可能要存到中，這也要修改代碼嗎修改配置文件只需要修改環(huán)境列表，第一個(gè)環(huán)境為默認(rèn)環(huán)境指明現(xiàn)在使用的環(huán)境打包的路徑，只在的時(shí)候有用這個(gè)環(huán)境下面的請(qǐng)求的域

multi-hostname-vue-cli

github傳送門

針對(duì)解決的問題

接口環(huán)境很多，有測(cè)試服，有qa，有正式等等，每次都要修改代碼？no!

靜態(tài)資源可能要存到cdn中，這也要修改代碼嗎？no!

Start up clone && npm install 修改配置文件 /config/host-config.js,只需要修改 ENV_LIST 
/*
* 環(huán)境列表，第一個(gè)環(huán)境為默認(rèn)環(huán)境
* envName: 指明現(xiàn)在使用的環(huán)境
* dirName: 打包的路徑，只在build的時(shí)候有用
* apiHostname: 這個(gè)環(huán)境下面的api 請(qǐng)求的域名
* assetHostname: 靜態(tài)資源存放的域名,未指定（undefined）則為相對(duì)路徑
* */
const ENV_LIST = [
  {
    envName: "test",
    dirName: "test",
    apiHostname: "http://test_apiHostname",
    assetHostname: "http://localhost:3004"
  },
  {
    envName: "pro",
    dirName: "pro",
    apiHostname: "http://product_apiHostname",
    assetHostname:"http://product_assetHostname"
  },
  {
    envName: "qa",
    dirName: "qa",
    apiHostname: "http://product_apiHostname",
    assetHostname:"http://product_assetHostname"
  }
]
在文件中使用hostname 
const HOST_NAME = process.env.HOST_NAME
export {HOST_NAME}
dev 開發(fā)調(diào)試 
npm run dev [envName]

envName 為上面配置的envName，對(duì)應(yīng)的process.env.HOST_NAME的值就是 對(duì)應(yīng)的ENV_LIST中的hostname

不指定envName默認(rèn)選擇ENV_LIST的第一個(gè)值

envName 不在ENV_LIST 中的時(shí)候默認(rèn)選擇 ENV_LIST的第一個(gè)值

# 例子：
# 在qa的環(huán)境中調(diào)試，process.env.HOST_NAME === "http://qa_hostname"
npm run dev qa
build 打包 
npm run build [envName] //打指定環(huán)境的包


npm run build-all // 全部重新打包

打包的envName與 dev類似

執(zhí)行打包命令會(huì)在dist文件夾中生成對(duì)應(yīng)的路徑

html和css中使用過的靜態(tài)資源的引用路徑會(huì)指定到設(shè)定的域名中

dist
    |-test
    |-qa
    |-pro
對(duì)比vue-cli生成的環(huán)境修改的地方 新增 /config/host-conf.js 
host-conf.js
修改 /config/index.js

修改build的路徑

修改build的靜態(tài)資源的路徑

修改 `/build/webpack.base.conf.js

添加 用戶客戶端的環(huán)境變量

// 通過webpack傳入客戶端中
  plugins: [
    new webpack.DefinePlugin({
      "process.env.HOST_NAME": """ + process.env.HOST_NAME + """
    })
  ]
入口build/build.js和build/dev-server.js設(shè)置環(huán)境變量 
// 設(shè)置域名的環(huán)境變量
process.env.HOST_ENV = process.argv[2]
新增 build/build-all.js 
host-conf.js
修改package.json的script, 增加Build-all 
"build-all": "node build/build-all.js"

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

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

相關(guān)文章

  • 手摸手，帶你用vue擼后臺(tái) 系列五(v4.0新版本)

    摘要：同時(shí)增加了單元測(cè)試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁(yè)面更新路由等等功能。雖然它的初衷是為了單元測(cè)試的，但正好滿足了我們的需求。它會(huì)重寫瀏覽器的對(duì)象，從而才能攔截所有請(qǐng)求，代理到本地。 前言 vue-element-admin 從 2017.04.17提交第一個(gè) commit 以來，維護(hù)至今已經(jīng)有兩年多的時(shí)間了了，發(fā)布了四十多個(gè)版本，...

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

  • 手摸手，帶你用vue擼后臺(tái) 系列五(v4.0新版本)

    摘要：同時(shí)增加了單元測(cè)試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁(yè)面更新路由等等功能。雖然它的初衷是為了單元測(cè)試的，但正好滿足了我們的需求。它會(huì)重寫瀏覽器的對(duì)象，從而才能攔截所有請(qǐng)求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個(gè) commit 以來，維護(hù)至今已經(jīng)有兩年多的時(shí)間了了，發(fā)布了四十多個(gè)版本，收獲了三...

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

  • 開發(fā)富文本編輯器的一些經(jīng)驗(yàn)教訓(xùn)

    摘要：當(dāng)然，這只是結(jié)合自己項(xiàng)目的工程結(jié)構(gòu)和特點(diǎn)設(shè)置的一套使用方式，僅供參考開發(fā)富文本編輯器的教訓(xùn)由于項(xiàng)目的時(shí)間較緊張，我在頁(yè)面上應(yīng)用了框架的背景下，想當(dāng)然的想要把也應(yīng)用于富文本編輯器的開發(fā)，事實(shí)證明這是不太可行的。 此文已由作者劉詩(shī)川授權(quán)網(wǎng)易云社區(qū)發(fā)布。 歡迎訪問網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)。 最近我們的產(chǎn)品有一個(gè)需求是要在PC端做一個(gè)面向用戶的書評(píng)編輯器，讓用戶和編輯在蝸牛讀書...

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

  • webpack4.x升級(jí)摘要

    摘要：以為例，編寫來幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測(cè)到文件的變化，然后為你執(zhí)行一系列的自動(dòng)化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對(duì)第三方類庫(kù)使用各種模塊化寫法以及語(yǔ)法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個(gè)職位叫做 軟件開發(fā)工程師 在那個(gè)時(shí)代，大家可能...

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

  • webpack開發(fā)與生產(chǎn)環(huán)境配置

    摘要：豹哥對(duì)于剛開始小白的自己雖然現(xiàn)在也白知無不談，而且回復(fù)超快超認(rèn)真。這里真的很感謝豹哥。是項(xiàng)目啟動(dòng)時(shí)的一些文件，如的配置文件開發(fā)環(huán)境服務(wù)配置文件一些簡(jiǎn)單工具函數(shù)等等。是關(guān)于整個(gè)項(xiàng)目的環(huán)境配置包括開發(fā)與生產(chǎn)。 前言 作者去年就開始使用webpack, 最早的接觸就來自于vue-cli。那個(gè)時(shí)候工作重點(diǎn)主要也是 vue 的使用，對(duì)webpack的配置是知之甚少，期間有問題也是詢問大牛 @呂大...

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

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

0條評(píng)論

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