vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口
項(xiàng)目開(kāi)發(fā)中，前端在配置后端api域名時(shí)很困擾，常常出現(xiàn):
本地開(kāi)發(fā)環(huán)境: api-dev.demo.com
測(cè)試環(huán)境: api-test.demo.com
線上生產(chǎn)環(huán)境: api.demo.com，
這次是在Vue.js項(xiàng)目中打包，教大家個(gè)方法：
使用 npm run build -- xxx ，根據(jù)傳遞參數(shù)xxx來(lái)判定不同的環(huán)境，給出不同的域名配置。
1.項(xiàng)目中/config/dev.env.js修改：
新增：HOST: '"dev"'
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
HOST: '"dev"'
})
2.項(xiàng)目中/config/prod.env.js修改：
獲取傳遞進(jìn)來(lái)的參數(shù)：
'use strict'
let HOST = process.argv.splice(2)[0] || 'prod';
console.log(HOST);
module.exports = {
NODE_ENV: '"production"',
HOST: '"'+HOST+'"'
}
3.項(xiàng)目中ajax封裝的地方修改：
/** ** 設(shè)置API接口域名 **/ let apiUrl = ''; // 根據(jù) process.env.HOST 的值判斷當(dāng)前是什么環(huán)境 // 命令：npm run build -- test ，process.env.HOST就設(shè)置為：'test' let HOST = process.env.HOST; HOST = HOST === 'prod' ? '' : '-' + HOST; apiUrl = 'http://api'+HOST+'.demo.com'; axios.defaults.baseURL = apiUrl;
4.最后敲命令：
npm run build -- test
注意–是2個(gè)橫杠，后面跟參數(shù)，這樣 process.env.HOST 就獲取到參數(shù) 'test' 了,
apiUrl = 'http://api-test.demo.com'
若線上prod發(fā)布打包，npm run build -- prod
apiUrl = 'http://api.demo.com'
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js每天必學(xué)之表單控件綁定，如何在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，感興趣的小伙伴們可以參考一下2016-09-09
element多級(jí)菜單動(dòng)態(tài)顯示的實(shí)現(xiàn)
通常在后臺(tái)管理系統(tǒng)中,需要根據(jù)每個(gè)用戶不同的權(quán)限來(lái)動(dòng)態(tài)展示菜單,本文主要介紹了element多級(jí)菜單動(dòng)態(tài)顯示的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
vue3獲取ref實(shí)例結(jié)合ts的InstanceType問(wèn)題
這篇文章主要介紹了vue3獲取ref實(shí)例結(jié)合ts的InstanceType問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
elementui實(shí)現(xiàn)表格(el-table)默認(rèn)選中功能
這篇文章主要介紹了elementui實(shí)現(xiàn)表格(el-table)默認(rèn)選中功能,本文給大家分享實(shí)現(xiàn)思路結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-07-07
這篇文章主要介紹了vue如何循環(huán)請(qǐng)求一個(gè)接口問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue數(shù)字類(lèi)型過(guò)濾器的示例代碼
本篇文章主要介紹了vue數(shù)字類(lèi)型過(guò)濾器的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
使用vue-video-player實(shí)現(xiàn)直播的方式
在開(kāi)發(fā)期間使用過(guò)video.js、mui-player等插件，發(fā)現(xiàn)這些video插件對(duì)移動(dòng)端的兼容性都不友好，最后發(fā)現(xiàn)一個(gè)在移動(dòng)端兼容不錯(cuò)的插件vue-video-player，下面通過(guò)場(chǎng)景分析給大家介紹使用vue-video-player實(shí)現(xiàn)直播的方法，感興趣的朋友一起看看吧2022-01-01
詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問(wèn)題
這篇文章主要介紹了詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Vue自定義指令實(shí)現(xiàn)彈窗拖拽四邊拉伸及對(duì)角線拉伸效果
小編最近在做一個(gè)vue前端項(xiàng)目，需要實(shí)現(xiàn)彈窗的拖拽，四邊拉伸及對(duì)角線拉伸，以及彈窗邊界處理功能，本文通過(guò)實(shí)例代碼給大家分享我的實(shí)現(xiàn)過(guò)程及遇到問(wèn)題解決方法，感興趣的朋友一起看看吧2021-08-08
解決node-sass安裝報(bào)錯(cuò)無(wú)python等情況
在國(guó)內(nèi)安裝node-sass常因無(wú)法穩(wěn)定連接GitHub而失敗,解決方法包括手動(dòng)下載對(duì)應(yīng)的binding.node文件并放入緩存目錄,操作步驟詳細(xì),適合非Python用戶,無(wú)需額外環(huán)境配置2024-10-10