vue webpack實用技巧總結(jié)
更新時間：2018年04月24日 08:52:56 投稿：laozhang
本篇文章給大家總結(jié)了vue+webpack的實用技巧以及相關(guān)實例代碼分享，有興趣的朋友可以參考學(xué)習(xí)下。
利用 webpack 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址
在開發(fā)時，前后端分離同時進(jìn)行開發(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ù)器正式接口
相關(guān)文章
vue-resource + json-server模擬數(shù)據(jù)的方法
本篇文章主要介紹了vue-resource + json-server模擬數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue中巧用三元表達(dá)式解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于net?6+vue?插件axios?后端接收參數(shù)問題
接到這樣一個項目需求是這樣的，前端vue?必須對象傳遞后端也必須對象接收，接下來通過本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問題,需要的朋友可以參考下2022-01-01
vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)
網(wǎng)上有不少使用mockjs模擬數(shù)據(jù)的文章，但基本都是本地攔截請求返回數(shù)據(jù)，本文主要介紹了vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)，文中根據(jù)實例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue3.0插件執(zhí)行原理與實戰(zhàn)，Vue項目能夠使用很多插件來豐富自己的功能Vue-Router、Vuex等，節(jié)省了我們大量的人力和物力，下面我們就一起來了解Vue3.0插件的原理吧，需要的小伙伴可以參考一下2022-02-02
這篇文章主要介紹了在vue項目如何使用base64加密，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue2.x中h函數(shù)(createElement)與vue3中的h函數(shù)詳解
h函數(shù)本質(zhì)就是createElement(),h函數(shù)其實是createVNode的語法糖,返回的就是一個Js普通對象,下面這篇文章主要給大家介紹了關(guān)于vue2.x中h函數(shù)(createElement)與vue3中h函數(shù)的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue3頁面query參數(shù)變化并重新加載頁面數(shù)據(jù)方式
在Web開發(fā)中,頁面間的跳轉(zhuǎn)及數(shù)據(jù)刷新是常見問題,通過使用$router.push和$router.replace方法,可以控制頁面跳轉(zhuǎn)的行為,具體操作時,若發(fā)現(xiàn)頁面ID變更后數(shù)據(jù)未刷新,可通過給router-view標(biāo)簽添加key值解決,若使用keep-alive2024-10-10
vue el-table 動態(tài)添加行與刪除行的實現(xiàn)
這篇文章主要介紹了vue el-table 動態(tài)添加行與刪除行的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue 使用iView組件中的Table實現(xiàn)定時自動滾動效果
要在css中設(shè)置table的高度,使數(shù)據(jù)過多時出現(xiàn)滾動條,將縱向設(shè)置為overflow-y: auto;橫向設(shè)置隱藏 overflow-x: hidden,接下來通過本文介紹vue使用iView組件中的Table實現(xiàn)定時自動滾動效果,需要的朋友可以參考下2024-05-05