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 cale()计算函数使用
这篇文章手把手教你拿捏vue cale()计算函数使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
vue3项目引入pinia报错的简单解决
这篇文章主要介绍了vue3项目引入pinia报错的简单解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
在vue项目中使用axios发送post请求出现400错误的解决
这篇文章主要介绍了在vue项目中使用axios发送post请求出现400错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue3中引入Ant Design的操作方法
Ant Design 是一个开源库，可让您创建吸引人的响应式网站。如果您想使用经过充分测试且易于学习的框架，那么它是您下一个项目的绝佳选择，这篇文章主要介绍了如何在 Vue 3 中使用 Ant Design,需要的朋友可以参考下
2023-04-04
vue中v-for和v-if一起使用之使用compute的示例代码
这篇文章主要介绍了vue中v-for和v-if一起使用之使用compute的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-05-05
Vue组件之间传值/调用几种方式
这篇文章主要介绍了Vue组件之间传值/调用的几种方式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
基于vue hash模式微信分享#号的解决
这篇文章主要介绍了基于vue hash模式微信分享#号的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
ElementUI年份范围选择器功能实现
elementUI中有日期范围组件,月份范围选择的,就是没有年份范围选择的,需要加一个类似风格的,下面这篇文章主要给大家介绍了关于ElementUI年份范围选择器功能实现的相关资料,需要的朋友可以参考下
2023-02-02
vue.js中window.onresize的超详细使用方法
这篇文章主要给大家介绍了关于vue.js中window.onresize的超详细使用方法,window.onresize 是直接给window的onresize属性绑定事件,只能有一个,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
vue-hook-form使用详解
这篇文章主要为大家详细介绍了vue-hook-form的使用方法，以及如何安装vue-hook-form，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04