脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue项目中运用webpack动态配置打包多种环境域名

vue项目中运用webpack动态配置打包多种环境域名的方法

 更新时间：2019年06月24日 08:51:23   作者：澎湖巡检司  
本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。需要的朋友跟随小编一起看看吧

在如今前后端分离，各种框架盛行的前端界，对项目的打包要求也越来越复杂，本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。（欢迎纠错，谢谢。）

1. 安装插件 cross-env，npm install cross-env --save -dev，用于配置命令行输入命令。

2. 修改package.json里的script命令：

配置了test（测试），ready（预发布），prod（正式）三种环境，npm run build 默认设置成 npm run build:prod，也可以根据自己需求，配置更多的命令，参数自定。网上看到有人去修改NODE_ENV这个默认的参数，配置文件里有很多地方都引用了这个参数。本人认为这个默认参数可以不改，自己重新增加一个参数就行（这里增加一个BUILD_ENV参数）。

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "e2e": "node test/e2e/runner.js",
  "test": "npm run unit && npm run e2e",
  "build": "npm run build:prod",
  "build:test": "cross-env NODE_ENV=production BUILD_ENV=test node build/build.js",
  "build:ready": "cross-env NODE_ENV=production BUILD_ENV=ready node build/build.js",
  "build:prod": "cross-env NODE_ENV=production BUILD_ENV=prod node build/build.js"
 },

3. 修改config目录下的prod.env.js

里面的默认配置是这样：只有一个NODE_ENV

'use strict'
module.exports = {
 NODE_ENV: '"production"', 
}

修改后的配置：

'use strict'
const BUILD_ENV = process.env.BUILD_ENV
let baseUrl 
switch (BUILD_ENV) {
 case 'test':
  baseUrl = 'api.test.com'
  break; 
 case 'ready':
  baseUrl = 'api.ready.com'
 break;
 case 'prod':
  baseUrl = 'api.prod.com'
 break;
}
module.exports = {
 NODE_ENV: '"production"', 
 BUILD_ENV: '"' + BUILD_ENV + '"',
 baseUrl: '"' + baseUrl + '"',
}

修改的配置增加了BUILD_ENV和baseUrl两个属性， 属性值记得拼接双引号 ，process.env.BUILD_ENV就是命令行里输入的BUILD_ENV的值，再根据BUILD_ENV进行相应的判断。在项目里，就可以通过process.env拿到prod.env.js暴露出去的3个属性。比如接口文件，就需要process.env.baseUrl来动态修改不同环境域名。

总结

以上所述是小编给大家介绍的vue项目中运用webpack动态配置打包多种环境域名的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • vue-element-admin 登陆及目录权限控制的实现

    vue-element-admin 登陆及目录权限控制的实现

    本文主要介绍了vue-element-admin 登陆及目录权限控制的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue3.0中的双向数据绑定方法及优缺点

    vue3.0中的双向数据绑定方法及优缺点

    这篇文章主要介绍了vue3.0中的双向数据绑定方法 ，文中通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 浅谈super-vuex使用体验

    浅谈super-vuex使用体验

    super-vuex是一套用于简化Vuex的数据架构。这篇文章主要介绍了浅谈super-vuex使用体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 在使用vuex的时候出现commit未定义错误的解决

    在使用vuex的时候出现commit未定义错误的解决

    这篇文章主要介绍了在使用vuex的时候出现commit未定义错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • Vue利用mockjs编写假数据并应用的问题记录

    Vue利用mockjs编写假数据并应用的问题记录

    这篇文章主要介绍了Vue利用mockjs编写假数据并应用,本文通过实例代码给大家详细讲解，对Vue mockjs数据相关知识感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • el-input无法输入的问题和表单验证失败问题解决

    el-input无法输入的问题和表单验证失败问题解决

    在做项目的时候发现一个情况,输入框无法输入值并且表单校验失灵,所以下面这篇文章主要给大家介绍了关于el-input无法输入的问题和表单验证失败问题解决的相关资料,需要的朋友可以参考下
    2023-02-02
  • vue3中安装并使用CSS预处理器Sass的方法详解

    vue3中安装并使用CSS预处理器Sass的方法详解

    Sass是一种CSS预处理器,它扩展了CSS的功能,提供了更高级的语法和特性,例如变量、嵌套、混合、继承和颜色功能等,这些特性可以帮助开发者更高效地管理和维护样式表,本文介绍vue3中安装并使用CSS预处理器Sass的方法,感兴趣的朋友一起看看吧
    2024-01-01
  • Vue中的v-model绑定修饰符的实现原理

    Vue中的v-model绑定修饰符的实现原理

    v-model 是Vue.js中的一个重要指令,通过它我们可以轻松实现数据的双向绑定,本文介绍一些常用的 v-model 绑定修饰符,并解析它们的实现原理,感兴趣的朋友一起看看吧
    2024-01-01
  • vue中的自定义分页插件组件的示例

    vue中的自定义分页插件组件的示例

    这篇文章主要介绍了vue中的自定义分页插件组件的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 解决vue中对象属性改变视图不更新的问题

    解决vue中对象属性改变视图不更新的问题

    下面小编就为大家分享一篇解决vue中对象属性改变视图不更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论