利用 webpack 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址
創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務市北,10年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792
在開發(fā)時,前后端分離同時進行開發(fā)。前端調(diào)用后端給的接口也是在局域網(wǎng)內(nèi)部的。但是,當項目推到線上的時候,會從真實服務器上獲取接口,在測試接口和真實接口之間頻繁切換,讓人十分惡心。
第一步,在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"' }
第二步,在代碼中調(diào)用設置好的參數(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 打包項目的時候,打包的是服務器正式接口
當前標題:vuewebpack實用技巧總結(jié)
轉(zhuǎn)載來源:http://bm7419.com/article36/gipssg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、移動網(wǎng)站建設、軟件開發(fā)、網(wǎng)站策劃、動態(tài)網(wǎng)站、面包屑導航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)