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