详解vue 不同环境配置不同的打包命令

 更新时间:2019-04-07 17:00:18   作者:佚名   我要评论(0)

最近做的一个项目是配置了三个环境的:正式环境、测试环境和开发环境,下面以这个为例
第一步:安装cross-env


npm i --save-dev cross-env

或者在


pa

最近做的一个项目是配置了三个环境的:正式环境、测试环境和开发环境,下面以这个为例

第一步:安装cross-env

npm i --save-dev cross-env 

或者在

package.json中加上"cross-env": "^5.0.1"进行安装依赖

package.json:

//这是我项目的目录

第二步:修改各环境下的参数

在config/目录下添加test.env.js、develop.env.js。并且修改文件里的内容

config/prod.env.js

config/develop.env.js

第三步:更改build文件夹的东西

1.给build文件夹下增加环境文件 webpack.develop.conf.js

2.修改build.js

默认打包都是prod环境,我这里改成了默认是测试环境

打印是什么环境

3.修改webpack.prod.conf.js

4.修改webpack.base.conf.js

由于config/index.js配置不同的环境,静态文件取得是不同的目录,所以这边要根据不同的环境取出不同的配置,如果配置一样,那就无需区分了

config/index.js

config/index.js dev运行

config/index.js 开发环境配置

config/index.js 测试环境配置

config/index.js 正式环境配置

第四步: 输入不同的命令打包环境

"build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",

"build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",

"build--develop": "cross-env NODE_ENV=develop env_config=develop node build/build.js"

测试环境打包: npm run build--test

正式环境打包: npm run build--prod

开发环境打包: npm run build--develop

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 浅析vue给不同环境配置不同打包命令
  • 详解vue.js根据不同环境(正式、测试)打包到不同目录

相关文章

  • 详解vue 不同环境配置不同的打包命令

    详解vue 不同环境配置不同的打包命令

    最近做的一个项目是配置了三个环境的:正式环境、测试环境和开发环境,下面以这个为例 第一步:安装cross-env npm i --save-dev cross-env 或者在 pa
    2019-04-07
  • java实现图片任意角度旋转

    java实现图片任意角度旋转

    本文实例为大家分享了Java实现图片旋转,供大家参考,具体内容如下 方法一:普通方法实现图片旋转 /** * 图像旋转 * @param src * @param angel
    2019-04-07
  • 使用docker+devpi搭建本地pypi源的方法

    使用docker+devpi搭建本地pypi源的方法

    前一段时间开发需要经常使用 pip 下载,虽然把 pip 源改成了国内源,但我对速度还是不满意,更为重要的是集成 测试环境是离线的,要在集成测试环境开发显然
    2019-04-07
  • 浅谈express.js框架中间件(middleware)

    浅谈express.js框架中间件(middleware)

    _express.js_作为_Node.js_的老牌框架,是现有框架中最全面的。然而在学习express除了那些api之外,对于框架最重要的就是__中间件__这个概念了。如果理解了,就
    2019-04-07
  • ASP.NET Core利用Jaeger实现分布式追踪详解

    ASP.NET Core利用Jaeger实现分布式追踪详解

    前言 最近我们公司的部分.NET Core的项目接入了Jaeger,也算是稍微完善了一下.NET团队的技术栈。 至于为什么选择Jaeger而不是Skywalking,这个问题我只能回
    2019-04-07
  • vue自定义指令directive的使用方法

    vue自定义指令directive的使用方法

    Vue中内置了很多的指令,如v-model、v-show、v-html等,但是有时候这些指令并不能满足我们,或者说我们想为元素附加一些特别的功能,这时候,我们就需要用到v
    2019-04-07
  • vue路由导航守卫和请求拦截以及基于node的token认证的方法

    vue路由导航守卫和请求拦截以及基于node的token认证的方法

    什么时候需要登录验证与权限控制 1、业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面; 2、多个业务系统之
    2019-04-07
  • Spring boot项目redisTemplate实现轻量级消息队列的方法

    Spring boot项目redisTemplate实现轻量级消息队列的方法

    背景 公司项目有个需求, 前端上传excel文件, 后端读取数据、处理数据、返回错误数据, 最简单的方式同步处理, 客户端上传文件后一直阻塞等待响应, 但用户体
    2019-04-07
  • Spring注入Bean的一些方式总结

    Spring注入Bean的一些方式总结

    通过注解注入Bean 背景 我们谈到Spring的时候一定会提到IOC容器、DI依赖注入,Spring通过将一个个类标注为Bean的方法注入到IOC容器中,达到了控制反转的
    2019-04-07
  • 巧妙运用v-model实现父子组件传值的方法示例

    巧妙运用v-model实现父子组件传值的方法示例

    v-model介绍 熟悉Vue的小伙伴们都知道 v-model 是Vue的一个很大的特色,可以实现双向数据绑定。但本质上呢,它不过是语法糖,它负责监听用户的输入事件以更
    2019-04-07

最新评论