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

資訊專欄INFORMATION COLUMN

vue + webpack 實用技巧

fou7 / 701人閱讀

摘要：實用技巧利用給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址在開發(fā)時，前后端分離同時進行開發(fā)。前端調(diào)用后端給的接口也是在局域網(wǎng)內(nèi)部的。而我們運行打包項目的時候，打包的是服務(wù)器正式接口

vue + webpack 實用技巧 利用 webpack 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址 
在開發(fā)時，前后端分離同時進行開發(fā)。前端調(diào)用后端給的接口也是在局域網(wǎng)內(nèi)部的。但是，當(dāng)項目推到線上的時候,會從真實服務(wù)器上獲取接口,在測試接口和真實接口之間頻繁切換，讓人十分惡心。

第一步，在webpack配置文件中，分別設(shè)置不同的接口地址

打開dev.en.js文件。修改如下：

var merge = require("webpack-merge")
var prodEnv = require("./prod.env")

module.exports = merge(prodEnv, {
  NODE_ENV: ""development"",
  API_ROOT: ""http://192.168.1.8/api"" // 添加api地址
})

同樣在prod.env.js文件中

module.exports = {
  NODE_ENV: ""production"",
  API_ROOT: ""http://www.baidu.com/api""
}

第二步，在代碼中調(diào)用設(shè)置好的參數(shù)

比如我的：　src/config/api.js文件

// 原來的API接口地址
var root = "https://cnodejs.org/api/v1"
// 新配置的API接口地址
var root = process.env.API_ROOT

最后

npm run dev　的時候，跑的就是測試接口。而我們運行

npm run build　打包項目的時候，打包的是服務(wù)器正式接口

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

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

相關(guān)文章

  • 前端最實用書簽(持續(xù)更新)

    摘要：前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術(shù)做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術(shù)做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導(dǎo)入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

    sshe 評論0 收藏0

  • 前端經(jīng)典文章

    摘要：上周末看這篇文章時，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制，如果讀完本文還不懂，...

    lowett 評論0 收藏0

  • 7月份前端資源分享

    摘要：更多資源請文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機化排序算法實現(xiàn)學(xué)習(xí)筆記數(shù)組隨機排序個變態(tài)題解析上個變態(tài)題解析下中的數(shù)字前端開發(fā)筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛?cè)腴T的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的 更多資源請Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfr...

    pingan8787 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    jsbintask 評論0 收藏0

發(fā)表評論

0條評論

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