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下拉列表功能实例代码

    这篇文章主要介绍了vue下拉列表功能实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • element-plus中如何实现按需导入与全局导入

    element-plus中如何实现按需导入与全局导入

    本文主要介绍了element-plus中如何实现按需导入与全局导入,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • VUE3+TS递归组件实现TreeList设计实例详解

    VUE3+TS递归组件实现TreeList设计实例详解

    这篇文章主要为大家介绍了VUE3+TS递归组件实现TreeList设计实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 浅谈Vue DIFF

    浅谈Vue DIFF

    本文主要介绍了浅谈Vue DIFF,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue3+ts封装弹窗及封装分页的示例代码

    vue3+ts封装弹窗及封装分页的示例代码

    这篇文章主要介绍了vue3+ts封装弹窗及封装分页的示例代码,本文通过定义defaultDialog .vue,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 如何使用elementUI组件实现表格的分页及搜索功能

    如何使用elementUI组件实现表格的分页及搜索功能

    最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,这篇文章主要给大家介绍了关于如何使用elementUI组件实现表格的分页及搜索功能的相关资料,需要的朋友可以参考下
    2023-03-03
  • Vue表单输入的双向绑定失效原因与解决方案

    Vue表单输入的双向绑定失效原因与解决方案

    在Vue.js开发中,双向绑定是实现表单输入与数据同步的核心特性之一,然而,在实际开发中,开发者可能会遇到双向绑定失效的问题,导致表单输入无法正确更新数据或视图,本文将探讨双向绑定失效的常见原因,并提供相应的解决方案,需要的朋友可以参考下
    2025-03-03
  • vue2.0实战之使用vue-cli搭建项目(2)

    vue2.0实战之使用vue-cli搭建项目(2)

    这篇文章主要为大家详细介绍了vue2.0实战第二篇使用vue-cli搭建项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 使用electron-builder将项目打包成桌面程序的详细教程

    使用electron-builder将项目打包成桌面程序的详细教程

    这篇文章主要介绍了使用electron-builder把web端的项目打包生成桌面程序,并可安装程序,文中通过代码示例和图文结合的方式给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2024-08-08
  • Vue拦截器原理以及详细使用方法

    Vue拦截器原理以及详细使用方法

    这篇文章主要给大家介绍了关于Vue拦截器原理以及详细使用的相关资料,Vue拦截器通常用于在发送请求或响应数据时对其进行一些处理或修改,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08

最新评论