vue中Npm run build 根據(jù)環(huán)境傳遞參數(shù)方法來(lái)打包不同域名
項(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'
總結(jié)
以上所述是小編給大家介紹的vue中Npm run build 根據(jù)環(huán)境傳遞參數(shù)方法來(lái)打包不同域名，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
uniapp 拖拽圖片排序功能實(shí)現(xiàn) 類(lèi)似于微信朋友圈效果
這篇文章主要介紹了uniapp 拖拽圖片排序功能實(shí)現(xiàn)類(lèi)似于微信朋友圈,一部分是拖拽的放大做小,xy位置判定,圖片數(shù)組的插入排序,另一部分是上傳加號(hào)圖片的?定位? 動(dòng)態(tài)計(jì)算分為幾列,每一個(gè)圖片大小的位置?絕對(duì)定位的計(jì)算,需要的朋友可以參考下2024-07-07
vue+Element實(shí)現(xiàn)登錄隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)登錄隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue+spring boot實(shí)現(xiàn)校驗(yàn)碼功能
這篇文章主要為大家詳細(xì)介紹了vue+spring boot實(shí)現(xiàn)校驗(yàn)碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
本篇文章主要介紹了詳解webpack打包vue時(shí)提取css，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
element-ui?el-upload實(shí)現(xiàn)上傳文件及簡(jiǎn)單的上傳文件格式驗(yàn)證功能
前端上傳文件后,后端接受文件進(jìn)行處理后直接返回處理后的文件,前端直接再將文件下載下來(lái),下面這篇文章主要給大家介紹了關(guān)于element-ui?el-upload實(shí)現(xiàn)上傳文件及簡(jiǎn)單的上傳文件格式驗(yàn)證功能的相關(guān)資料,需要的朋友可以參考下2022-11-11
ElementUI?select彈窗在特定場(chǎng)合錯(cuò)位問(wèn)題解決方案
這篇文章主要介紹了ElementUI?select彈窗在特定場(chǎng)合錯(cuò)位問(wèn)題解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
sass或者less都提供變量設(shè)置，在需求切換主題的項(xiàng)目中使用less或者sass變量，這篇文章主要介紹了vue引入sass全局變量，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
springboot之springboot與netty整合方案
這篇文章主要介紹了VUE之關(guān)于store狀態(tài)管理核心解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue實(shí)現(xiàn)打印指定組件內(nèi)容的示例詳解
這篇文章主要和大家分享一下vue中打印指定組件內(nèi)容,多頁(yè)打印自動(dòng)適配紙張大小打印的方案,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-03-03
詳解從零搭建 vue2 vue-router2 webpack3 工程
本篇文章主要介紹了詳解從零搭建 vue2 vue-router2 webpack3 工程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11