vue中Npm run build 根据环境传递参数方法来打包不同域名
作者：盼少 发布时间：2024-04-27 16:17:22
标签：vue,npm,run,build
项目开发中，前端在配置后端api域名时很困扰，常常出现:
本地开发环境: api-dev.demo.com
测试环境: api-test.demo.com
线上生产环境: api.demo.com，
这次是在Vue.js项目中打包，教大家个方法：
使用 npm run build -- xxx ，根据传递参数xxx来判定不同的环境，给出不同的域名配置。
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 的值判断当前是什么环境
// 命令：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发布打包，npm run build -- prod
apiUrl = 'http://api.demo.com'
总结
以上所述是小编给大家介绍的vue中Npm run build 根据环境传递参数方法来打包不同域名网站的支持！
来源：http://www.cnblogs.com/pannysp/p/8665321.html
0
投稿猜你喜欢
- 在许多人看来，HTML应该是WEB制作所有语言中最简单的语言，因为它不需要编译、封闭等，甚至只需要一个记事本就可以让其在浏览器中呈现出来。所
- 1.概述这篇文章主要介绍python调用工具包实现发送邮件服务。在第二篇文章中介绍封装邮件服务工具类，该工具类将可以应用到其他的项目中。2.
- 经常在各处牛人的代码中看到许多简写的条件表达语句，看了一些介绍这方面的文章，觉得3 ways 2 say if这篇文章（http://www
- 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义
如何引入同级包和模块工程项目结构如下包AnimalShow和Class_test是同级包，AnimalShow是父类，Gound,Sea,S- 一、打开摄像头import cv2import numpy as npdef video_demo(): capture = c
- TCP协议用在python和wifi模块之间python建立TCP连接需要用到socket协议 如果是TCP Server，建立T
- pytorch forwod函数在父类中的调用问题背景最近在研究Detetron2的代码结构时，发现有些网络代码里面没有forward函数，
- 说明1. 使用google翻译服务获得翻译和语音;2. 使用mplayer播放获得的声音文件，因此，如果要播放语音，请确保PATH中能够找到
- 多表查询案列说明笛卡尔积的理解select id,department_namefrom employees,departments;#错的
- 本文将结合实例代码，介绍 OpenCV 如何查找轮廓、获取边界框。代码: contours.pyOpenCV 提供了 findContour
- 本文实例讲述了python实现忽略大小写对字符串列表排序的方法，是非常实用的技巧。分享给大家供大家参考。具体分析如下：先来看看如下代码：st
- 相信大家都用过浏览器的翻译网页功能，例如对于下图这个英文网页：一键翻译成中文以后是这样的：你可能会觉得这个功能很简单，不就是字符串替换吗？那
- —1—如果你对本文的代码感兴趣，可以去 Github （文末提供）里查看。第一次运行的时候会报一个错误（还没找到解决办法），不过只要再运行一
- 本文为大家分享了python爱心表白的具体代码，供大家参考，具体内容如下import turtleimport time# 画爱心的顶部de
- 这篇文章主要介绍了python基于property()函数定义属性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价
- 1. 准备工作有朋友可能没用过folium，它其实就是python的一个专业绘制地图的第三方库，所以在使用之前需要先安装它。pip
- 任务说明：编写一个钱币定位系统，其不仅能够检测出输入图像中各个钱币的边缘，同时，还能给出各个钱币的圆心坐标与半径。效果代码实现Canny边缘
- 在Flash播放器运行时，将不同来源的资源划分到独立的沙箱(sandbox)内，不同沙箱之间不能彼此操作数据（除非目标沙箱做过一些设置，授权
- 内容摘要： 模拟网页下拉菜单中有几个比较关键的CSS属性：position、left、top、
