溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue webpack實(shí)用技巧總結(jié)

發(fā)布時(shí)間：2020-09-30 06:05:54 來(lái)源：腳本之家 閱讀：112 作者：laozhang 欄目：web開(kāi)發(fā)

利用 webpack 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址

在開(kāi)發(fā)時(shí)，前后端分離同時(shí)進(jìn)行開(kāi)發(fā)。前端調(diào)用后端給的接口也是在局域網(wǎng)內(nèi)部的。但是，當(dāng)項(xiàng)目推到線上的時(shí)候,會(huì)從真實(shí)服務(wù)器上獲取接口,在測(cè)試接口和真實(shí)接口之間頻繁切換，讓人十分惡心。

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

打開(kāi)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文件

// 原來(lái)的API接口地址
var root = 'https://cnodejs.org/api/v1'
// 新配置的API接口地址
var root = process.env.API_ROOT

最后

npm run dev　的時(shí)候，跑的就是測(cè)試接口。而我們運(yùn)行

npm run build　打包項(xiàng)目的時(shí)候，打包的是服務(wù)器正式接口

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手