脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 分环境打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 在Vue3中创建和使用自定义指令的实现方式

    在Vue3中创建和使用自定义指令的实现方式

    在现代前端开发中,Vue.js 是一个非常流行的框架,它提供了许多强大的功能来帮助开发者构建高效的用户界面,自定义指令是 Vue.js 的一个重要特性,它允许开发者扩展 HTML 元素的功能,本文将详细介绍如何在 Vue3 中创建和使用自定义指令,并提供示例代码来帮助理解
    2024-12-12
  • vue 点击删除常用方式小结

    vue 点击删除常用方式小结

    这篇文章主要介绍了vue 点击删除常用方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue项目中Api的组织和返回数据处理的操作

    Vue项目中Api的组织和返回数据处理的操作

    这篇文章主要介绍了Vue项目中Api的组织和返回数据处理的操作，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)

    vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)

    这篇文章主要介绍了vue+vue-fullpage实现整屏滚动页面,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • vue-loader教程介绍

    vue-loader教程介绍

    本篇文章主要介绍了vue-loader教程介绍，vue-loader就是告诉webpack如何将vue格式的文件转换成js。有兴趣的可以了解一下
    2017-06-06
  • 详解vue 动态加载并注册组件且通过 render动态创建该组件

    详解vue 动态加载并注册组件且通过 render动态创建该组件

    这篇文章主要介绍了vue 动态加载并注册组件且通过 render动态创建该组件,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • vue-cli 打包使用history模式的后端配置实例

    vue-cli 打包使用history模式的后端配置实例

    今天小编就为大家分享一篇vue-cli 打包使用history模式的后端配置实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue3组件的v-model:value与v-model的区别解析

    vue3组件的v-model:value与v-model的区别解析

    在Vue3中,v-model和v-model:value都是用于实现双向数据绑定的语法糖,但v-model:value提供了更显式和灵活的绑定方式,允许你明确指定绑定的属性名和事件名,它们的主要区别在于默认行为、灵活性、多模型绑定和使用场景,感兴趣的朋友一起看看吧
    2025-02-02
  • webpack 3 + Vue2 使用dotenv配置多环境的步骤

    webpack 3 + Vue2 使用dotenv配置多环境的步骤

    这篇文章主要介绍了webpack 3 + Vue2 使用dotenv配置多环境,env文件在配置文件都可以用, vue页面用的时候需要在 webpack.base.conf.js 重新配置,需要的朋友可以参考下
    2023-11-11
  • vue通过过滤器实现数据格式化

    vue通过过滤器实现数据格式化

    这篇文章主要介绍了vue通过过滤器实现数据格式化的方法，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07

最新评论