vue-cli-service build 自定义参数方式

 更新时间:2023年10月30日 16:16:11   作者:ccc陈陈陈  
这篇文章主要介绍了vue-cli-service build 自定义参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue-cli-service build 自定义参数

vue-cli-service build

(1)**作用:**是打包资源文件

(2)**工具:**通过脚手架依赖的dotenv模块实现参数定义和读取

(3)**原理:**detenv作用是将环境变量从.env文件加载到process.env中,代码就可以通过process.env.VUE_APP_XX访问自定义的VUE_APP_XX的值了

在vue-cli-service的packjson中切换环境

(1)在运行时如果需要区分生产环境和测试环境

只需要

“scriptes”: {
“serve”: “vue-cli-service serve”, // 会将process.env.NODE_ENV设置为development
“build”: “vue-cli-service build” // 会将process.env.NODE_ENV设置为production
}

(2)在build时在dist/目录会有用于生产环境的包

需要添加选项–mode区分测试环境和生产环境

“scripts”: {
“build:test”: “vue-cli-service build --mode test”, // 测试环境
“build:prod”: “vue-cli-service build --mode prod”, // 生产环境
},
"build:dev": "vue-cli-service build --mode dev",	// 打包开发环境
"build:test": "vue-cli-service build --mode test",	// 打包集成测试
"build:uat": "vue-cli-service build --mode uat",	// 打包验收测试
"build:prod": "vue-cli-service build --mode prod",	// 打包生产环境

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VUE实现大转盘抽奖

    VUE实现大转盘抽奖

    营运三宝(九宫格、大转盘、老虎机,当然此三宝当然是最基础的营销运营手段),本片文章聊聊大转盘,转盘的实现逻辑应该是营销方案较为简单的一种了,本文将介绍如何实现大转盘抽奖,感兴趣的朋友可以参考下
    2021-05-05
  • uni-app自定义组件详细代码示例

    uni-app自定义组件详细代码示例

    组件是vue技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升,这篇文章主要给大家介绍了关于uni-app自定义组件的相关资料,需要的朋友可以参考下
    2024-02-02
  • VUE Token的失效处理详解

    VUE Token的失效处理详解

    这篇文章主要为大家介绍了VUE Token的失效处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 在Vue中使用axios请求拦截的实现方法

    在Vue中使用axios请求拦截的实现方法

    这篇文章主要介绍了在Vue中使用axios请求拦截,需要的朋友可以参考下
    2018-10-10
  • 基于vue.js中事件修饰符.self的用法(详解)

    基于vue.js中事件修饰符.self的用法(详解)

    下面小编就为大家分享一篇基于vue.js中事件修饰符.self的用法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue el-table实现多选框回填的示例代码

    vue el-table实现多选框回填的示例代码

    摘要:Vue多选框回填是实现表单数据高效处理的常见需求,本文主要介绍了vue el-table实现多选框回填的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • vue路由切换之淡入淡出的简单实现

    vue路由切换之淡入淡出的简单实现

    今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Element-Plus实现动态渲染图标的示例代码

    Element-Plus实现动态渲染图标的示例代码

    在Element-Plus中,我们可以使用component标签来动态渲染组件,本文主要介绍了Element-Plus 实现动态渲染图标教程,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • vue与原生app的对接交互的方法(混合开发)

    vue与原生app的对接交互的方法(混合开发)

    vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,这篇文章主要介绍了vue与原生app的对接交互的方法,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • 关于vue3编写挂载DOM的插件问题

    关于vue3编写挂载DOM的插件问题

    这篇文章主要介绍了vue3编写挂载DOM的插件的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07

最新评论