vue中Npm run build 根據環(huán)境傳遞參數方法來打包不同域名
更新時間：2018年03月29日 09:32:27 作者：盼少
這篇文章主要介紹了vue項目中Npm run build 根據環(huán)境傳遞參數方法來打包不同域名,使用npm run build --xxx，根據傳遞參數xxx來判定不同的環(huán)境，給出不同的域名配置，具體內容詳情大家參考下本文
項目開發(fā)中，前端在配置后端api域名時很困擾，常常出現(xiàn):
本地開發(fā)環(huán)境: api-dev.demo.com
測試環(huán)境: api-test.demo.com
線上生產環(huán)境: api.demo.com，
這次是在Vue.js項目中打包，教大家個方法：
使用 npm run build -- xxx ，根據傳遞參數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修改：
獲取傳遞進來的參數：
'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 = ''; // 根據 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個橫杠， 后面跟參數，這樣 process.env.HOST 就獲取到參數 'test' 了,
apiUrl = 'http://api-test.demo.com'
若線上prod發(fā)布打包，npm run build -- prod
apiUrl = 'http://api.demo.com'
總結
以上所述是小編給大家介紹的vue中Npm run build 根據環(huán)境傳遞參數方法來打包不同域名，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
uniapp 拖拽圖片排序功能實現(xiàn) 類似于微信朋友圈效果
這篇文章主要介紹了uniapp 拖拽圖片排序功能實現(xiàn)類似于微信朋友圈,一部分是拖拽的放大做小,xy位置判定,圖片數組的插入排序,另一部分是上傳加號圖片的?定位? 動態(tài)計算分為幾列,每一個圖片大小的位置?絕對定位的計算,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了vue+Element實現(xiàn)登錄隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了vue+spring boot實現(xiàn)校驗碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
本篇文章主要介紹了詳解webpack打包vue時提取css，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
element-ui?el-upload實現(xiàn)上傳文件及簡單的上傳文件格式驗證功能
前端上傳文件后,后端接受文件進行處理后直接返回處理后的文件,前端直接再將文件下載下來,下面這篇文章主要給大家介紹了關于element-ui?el-upload實現(xiàn)上傳文件及簡單的上傳文件格式驗證功能的相關資料,需要的朋友可以參考下2022-11-11
ElementUI?select彈窗在特定場合錯位問題解決方案
這篇文章主要介紹了ElementUI?select彈窗在特定場合錯位問題解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
sass或者less都提供變量設置，在需求切換主題的項目中使用less或者sass變量，這篇文章主要介紹了vue引入sass全局變量，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
springboot之springboot與netty整合方案
這篇文章主要介紹了VUE之關于store狀態(tài)管理核心解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要和大家分享一下vue中打印指定組件內容,多頁打印自動適配紙張大小打印的方案,文中的示例代碼講解詳細,需要的可以參考一下2024-03-03
詳解從零搭建 vue2 vue-router2 webpack3 工程
本篇文章主要介紹了詳解從零搭建 vue2 vue-router2 webpack3 工程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11