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