vue + webpack 實用技巧

fou7 發布于2019-08-22 16:38 / 695人閱讀

摘要：實用技巧利用給生產環境和發布環境配置不同的接口地址在開發時，前后端分離同時進行開發。前端調用后端給的接口也是在局域網內部的。而我們運行打包項目的時候，打包的是服務器正式接口

vue + webpack 實用技巧 利用 webpack 給生產環境和發布環境配置不同的接口地址

在開發時，前后端分離同時進行開發。前端調用后端給的接口也是在局域網內部的。但是，當項目推到線上的時候,會從真實服務器上獲取接口,在測試接口和真實接口之間頻繁切換，讓人十分惡心。

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

打開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""
}

第二步，在代碼中調用設置好的參數

比如我的：　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　打包項目的時候，打包的是服務器正式接口

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

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

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

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

sshe 2019-08-23 12:00 評論0 收藏0
前端經典文章

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

lowett 2019-08-22 13:58 評論0 收藏0
7月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

muddyway 2019-08-29 13:21 評論0 收藏0