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
投稿
猜你喜欢
- 前端的小伙伴们在babel等的加持下,已经可以愉快的使用es6来写代码了。然后对于服务端的nodejs就有点坑爹了,虽然原生支持了es6,但
- 内容摘要:asp使用最多的就是ACCESS数据库和ms sql server数据库,本文列出了asp连接这两个数据库的方
- 字符编码我们已经讲过了,字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题。因为计算机只能处理数字,如果要处理文本,就必须先把
- =一、链表链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。链表由一系列结点(链表中每一
- 安装python之后,我们往往面临这样一个问题,在命令行输入“python”,竟然出错,难道是没有安装成功吗?非也,其实是你的系统环境变量没
- 本文实例讲述了python使用any判断一个对象是否为空的方法。分享给大家供大家参考。具体实现代码如下:>>> eth =
- 单表操作增加数据auther_obj = {"auther_name":"崔皓然","au
- 正则表达式概述正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配。 Python 自1.5版本起增加了re 模
- 前言当我们开始准备数据建模、构建机器学习模型的时候,第一时间考虑的不应该是就考虑到选择模型的种类和方法。而是首先拿到特征数据和标签数据进行研
- 初学Python,遇到需要将mat文件转为csv文件,看了很多博客,最后找到了解决办法,代码如下:#方法1from pandas impor
- import turtle as tt.setup(800,600,0,0,)t.pensize(2)t.speed(1)t.color(&
- 本文实例讲述了Python使用xlrd读取Excel格式文件的方法。分享给大家供大家参考。具体如下:使用xlrd能够很方便的读取excel文
- 概述pandas中与库版本或依赖库版本相关的API主要有以下4个:pandas.__version__:查看pandas简要版本信息。pan
- 话不多说 直接上代码<el-upload :action="actionUrl&q
- Python实现文件的全备份和差异备份之前有写利用md5方式来做差异备份,但是这种md5方式来写存在以下问题:md5sum获取有些软连接的M
- 这个是用python实现的基本的增删改查的学生管理系统,其中主要是对输入的数据进行合法性检测的问题,这次又对函数进行了练习!掌握函数更加熟练
- 前言Python 3.7 将于今年夏天发布,Python 3.7 中将会有许多新东西:各种字符集的改进对注释的推迟评估以及对dataclas
- 引言pymysqlpool (本地下载)是数据库工具包中新成员,目的是能提供一个实用的数据库连接池中间件,从而避免在应用中频繁地创建和释放数
- 前言最近在开发行为验证码,经常触及到关于验证类型的相关内容。但使用起来不太熟练,闲暇之余,总结一下我对行为验证码验证类型的理解。验证类型概述
- 与大多数可以面向对象的编程语言不一样, PHP 是同时支持面向过程和面向对象的编程方式, PHP 开发者可以在面向过程和面向对象二者中自由选