亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

SoapEye / 3045人閱讀

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

multi-hostname-vue-cli

github傳送門

針對解決的問題

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

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

Start up clone && npm install 修改配置文件 /config/host-config.js,只需要修改 ENV_LIST 
/*
* 環(huán)境列表，第一個環(huán)境為默認(rèn)環(huán)境
* envName: 指明現(xiàn)在使用的環(huán)境
* dirName: 打包的路徑，只在build的時候有用
* apiHostname: 這個環(huán)境下面的api 請求的域名
* assetHostname: 靜態(tài)資源存放的域名,未指定（undefined）則為相對路徑
* */
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，對應(yīng)的process.env.HOST_NAME的值就是 對應(yīng)的ENV_LIST中的hostname

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

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

# 例子：
# 在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í)行打包命令會在dist文件夾中生成對應(yīng)的路徑

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

dist
    |-test
    |-qa
    |-pro
對比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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/84053.html

相關(guān)文章

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

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

    MonoLog 評論0 收藏0

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

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

    graf 評論0 收藏0

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

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

    mtunique 評論0 收藏0

  • webpack4.x升級摘要

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

    levinit 評論0 收藏0

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

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

    afishhhhh 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<