国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

接口環境很多？靜態資源要放cdn？不用修改代碼，用webpack就可以（vue）

SoapEye / 2974人閱讀

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

multi-hostname-vue-cli

github傳送門

針對解決的問題

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

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

Start up clone && npm install 修改配置文件 /config/host-config.js,只需要修改 ENV_LIST 
/*
* 環境列表，第一個環境為默認環境
* envName: 指明現在使用的環境
* dirName: 打包的路徑，只在build的時候有用
* apiHostname: 這個環境下面的api 請求的域名
* assetHostname: 靜態資源存放的域名,未指定（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 開發調試 
npm run dev [envName]

envName 為上面配置的envName，對應的process.env.HOST_NAME的值就是 對應的ENV_LIST中的hostname

不指定envName默認選擇ENV_LIST的第一個值

envName 不在ENV_LIST 中的時候默認選擇 ENV_LIST的第一個值

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


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

打包的envName與 dev類似

執行打包命令會在dist文件夾中生成對應的路徑

html和css中使用過的靜態資源的引用路徑會指定到設定的域名中

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

修改build的路徑

修改build的靜態資源的路徑

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

添加 用戶客戶端的環境變量

// 通過webpack傳入客戶端中
  plugins: [
    new webpack.DefinePlugin({
      "process.env.HOST_NAME": """ + process.env.HOST_NAME + """
    })
  ]
入口build/build.js和build/dev-server.js設置環境變量 
// 設置域名的環境變量
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"

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84053.html

相關文章

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

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

    MonoLog 評論0 收藏0

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

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

    graf 評論0 收藏0

  • 開發富文本編輯器的一些經驗教訓

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

    mtunique 評論0 收藏0

  • webpack4.x升級摘要

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

    levinit 評論0 收藏0

  • webpack開發與生產環境配置

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

    afishhhhh 評論0 收藏0

發表評論

0條評論

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