vue中Npm run build 根据环境传递参数方法来打包不同域名
更新时间：2018年03月29日 09:32:27 作者：盼少
这篇文章主要介绍了vue项目中Npm run build 根据环境传递参数方法来打包不同域名,使用npm run build --xxx，根据传递参数xxx来判定不同的环境，给出不同的域名配置，具体内容详情大家参考下本文
项目开发中，前端在配置后端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 根据环境传递参数方法来打包不同域名，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了uniapp 拖拽图片排序功能实现类似于微信朋友圈,一部分是拖拽的放大做小,xy位置判定,图片数组的插入排序,另一部分是上传加号图片的 定位 动态计算分为几列,每一个图片大小的位置 绝对定位的计算,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了vue+Element实现登录随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了vue+spring boot实现校验码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
本篇文章主要介绍了详解webpack打包vue时提取css，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
element-ui el-upload实现上传文件及简单的上传文件格式验证功能
前端上传文件后,后端接受文件进行处理后直接返回处理后的文件,前端直接再将文件下载下来,下面这篇文章主要给大家介绍了关于element-ui el-upload实现上传文件及简单的上传文件格式验证功能的相关资料,需要的朋友可以参考下2022-11-11
ElementUI select弹窗在特定场合错位问题解决方案
这篇文章主要介绍了ElementUI select弹窗在特定场合错位问题解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，这篇文章主要介绍了vue引入sass全局变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
springboot之springboot与netty整合方案
这篇文章主要介绍了VUE之关于store状态管理核心解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要和大家分享一下vue中打印指定组件内容,多页打印自动适配纸张大小打印的方案,文中的示例代码讲解详细,需要的可以参考一下2024-03-03
详解从零搭建 vue2 vue-router2 webpack3 工程
本篇文章主要介绍了详解从零搭建 vue2 vue-router2 webpack3 工程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论