脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue cli3 分环境打包

vue cli3 实现分环境打包的步骤

 更新时间：2021年03月12日 11:22:33   作者：水帅杰  
这篇文章主要介绍了vue cli3 实现分环境打包的步骤，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

用cli3搭建的vue项目号称零配置文件，为了方便打包（不用手动来回改不同环境进行打包）那么我们在需要打包的时候分不同环境打包怎么办呢
1.在根目录下创建三个配置文件，如下图

在这里插入图片描述

这里我创建了三个，这三个分别是我的 本地；离线；线上环境 ，三个文件的内容依次为下VUE_APP_TITLE要对应当前文件后缀，build 对应的production

NODE_ENV = 'production'
VUE_APP_TITLE = 'alpha'
====================================================================
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
====================================================================
NODE_ENV = 'production'
VUE_APP_TITLE = 'online'

2.package.json配置对应环境打包名称，如图所示：

在这里插入图片描述

3.如图所示

在这里插入图片描述

4.在接口拦截文件，如图所示：

在这里插入图片描述

5.配置完以后三个环境打打包方式分别如下：
app打包离线环境：npm run alpha
app打包本地环境：npm run build
app打包正式环境：npm run online

到此这篇关于vue cli3 实现分环境打包的步骤的文章就介绍到这了,更多相关vue cli3 分环境打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue文件树组件使用详解

    vue文件树组件使用详解

    这篇文章主要为大家详细介绍了vue文件树组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-03-03
  • 详解vuex数据传输的两种方式及this.$store undefined的解决办法

    详解vuex数据传输的两种方式及this.$store undefined的解决办法

    这篇文章主要介绍了vuex数据传输的两种方式 及 this.$store undefined的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 基于Vue CSR的微前端实现方案实践

    基于Vue CSR的微前端实现方案实践

    这篇文章主要介绍了基于Vue CSR的微前端实现方案实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • vue @click与@click.native,及vue事件机制的使用分析

    vue @click与@click.native,及vue事件机制的使用分析

    这篇文章主要介绍了vue @click与@click.native,及vue事件机制的使用分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 使用Vue和React分别实现锚点定位功能

    使用Vue和React分别实现锚点定位功能

    这篇文章主要为大家详细介绍了如何使用Vue和React分别实现锚点定位功能,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以学习一下
    2024-01-01
  • vue设置默认首页的操作

    vue设置默认首页的操作

    这篇文章主要介绍了vue设置默认首页的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue填坑之webpack run build 静态资源找不到的解决方法

    vue填坑之webpack run build 静态资源找不到的解决方法

    今天小编就为大家分享一篇vue填坑之webpack run build 静态资源找不到的解决方法。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 深入理解Vue的过度与动画

    深入理解Vue的过度与动画

    这篇文章主要为大家介绍了Vue的过度与动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-11-11
  • vueCli 4.x升级5.x报错:Progress Plugin Invalid Options的解决方法

    vueCli 4.x升级5.x报错:Progress Plugin Invalid Options的解决方法

    本文主要介绍了vueCli 4.x升级5.x报错:Progress Plugin Invalid Options的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • Vue如何优雅的清除定时器

    Vue如何优雅的清除定时器

    定时器如果不及时合理地清除，会造成业务逻辑混乱甚至应用卡死的情况，这个时就需要清除定时器，本文就介绍了Vue如何优雅的清除定时器，感兴趣的可以了解一下
    2021-07-07

最新评论