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計算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)
這篇文章主要介紹了Vue計算屬性與監(jiān)視(偵聽)屬性的使用,計算屬性指的是通過一系列運算之后，最終得到一個值，watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對數(shù)據(jù)的變化做特定的操作，本文就這兩種屬性給大家詳細(xì)講解，感興趣的朋友一起學(xué)習(xí)吧2022-11-11
這篇文章主要介紹了Vue開發(fā)指南之重點知識梳理，對Vue框架感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了vue2中使用AntV?以g2plot為實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue下拉框雙向聯(lián)動效果,實現(xiàn)聯(lián)動，大家都知道在vue的頁面中，想要實現(xiàn)多個<el-select 下拉框的值動態(tài)改變，必須要調(diào)用@change 函數(shù)，具體操作方法跟隨小編一起學(xué)習(xí)下吧2022-04-04
這篇文章主要介紹了vue.config.js常用配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
完美解決vue引入BMapGL is not defined的問題
在Vue項目中使用BMapGL時,通過在src下添加bmp.js文件并配置密鑰（ak）,可以有效解決地圖API的應(yīng)用問題,本方法是基于個人經(jīng)驗總結(jié),希望能為開發(fā)者提供參考和幫助2024-10-10
這篇文章主要介紹了關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過實例代碼給大家分享解決方法，需要的朋友可以參考下2022-08-08
滑塊驗證是比較常見的人機(jī)鑒別的方法，本文主要介紹了Vue集成阿里云做滑塊驗證，具有一定的參考價值，感興趣的可以了解一下2022-01-01
這篇文章主要介紹了vue鍵盤事件keyup、keydown的作用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
組件是Vue.js的最核心的功能,所謂的組件化就是把頁面拆分成多個組件,每個組件單獨使用CSS,JS,模板,圖片等資源進(jìn)行開發(fā)與維護(hù),然后在制作網(wǎng)頁的時候根據(jù)需要調(diào)用相關(guān)的組件,這篇文章主要給大家介紹了關(guān)于vue.js全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下2022-12-12