脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue npm run build

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 根据环境传递参数方法来打包不同域名，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • vue实现匀速轮播效果

    vue实现匀速轮播效果

    这篇文章主要为大家详细介绍了vue实现匀速轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue3 源码解读之 Teleport 组件使用示例

    Vue3 源码解读之 Teleport 组件使用示例

    这篇文章主要为大家介绍了Vue3 源码解读之 Teleport 组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • 关于Vue3中defineProps用法图文详解

    关于Vue3中defineProps用法图文详解

    在vue3中组件传参有很多种方式,和v2大差不差,但是有的地方还是有很多的区别,下面这篇文章主要给大家介绍了关于Vue3中defineProps用法的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue实现定位并解决内存泄漏

    Vue实现定位并解决内存泄漏

    Vue.js 是一个流行且强大的 JavaScript 框架,它允许我们构建动态和交互式 Web 应用程序,本文我们将深入探讨 Vue.js 应用程序中内存泄漏的原因,并探索如何定位和修复这些问题的有效策略,希望对大家有所帮助
    2023-09-09
  • Vue3 的ref和reactive的用法和区别示例解析

    Vue3 的ref和reactive的用法和区别示例解析

    ref和reactive是Vue3中用来实现数据响应式的API,一般情况下,ref定义基本数据类型,reactive定义引用数据类型,本文给大家介绍Vue3 的ref和reactive的用法和区别,感兴趣的朋友一起看看吧
    2023-10-10
  • vue实现翻牌动画

    vue实现翻牌动画

    这篇文章主要为大家详细介绍了vue实现翻牌动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue中实现路由跳转的三种方式(超详细整理)

    Vue中实现路由跳转的三种方式(超详细整理)

    这篇文章给大家详细的整理了Vue中实现路由跳转的三种方式,使用vue-router,声明式-router-link,编程式这三种方法,分别有详细的代码示例,需要的朋友可以参考下
    2023-09-09
  • 在vue中,v-for的索引index在html中的使用方法

    在vue中,v-for的索引index在html中的使用方法

    下面小编就为大家分享一篇在vue中,v-for的索引index在html中的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue混入mixin流程与优缺点详解

    vue混入mixin流程与优缺点详解

    混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-09-09
  • Vue2.0实现自适应分辨率

    Vue2.0实现自适应分辨率

    这篇文章主要为大家详细介绍了Vue2.0实现自适应分辨率，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论