vue配置生产环境.env.production与测试环境.env.development
更新时间：2023年10月30日 14:20:30 作者：六卿
这篇文章主要介绍了vue配置生产环境.env.production与测试环境.env.development方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
静下来 慢慢看
首先我们需要搭建一个项目
依赖包会自动下载好 无需自己 npm i
- .env 无论什么环境都会加载
- .env.production 生产环境加载
- .env.development 测试开发环境加载
我们下面的例子分开来写 只用 .env.production .env.development
在项目根目录新建两个文件 分别为.env.production文件 .env.development文件
在文件里面我们配置如下
在.env文件
VUE_APP_NAME='vue测试名称'
.env.development文件：
NODE_ENV = development VUE_APP_URL = 'developmentURL' //自定义变量 必须要以VUE_APP_开头定义
.env.production 文件：
NODE_ENV = production VUE_APP_URL = 'productionURL' //自定义变量 必须要以VUE_APP_开头定义
下面我们就需要配置 package.json
{
"name": "my",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
//打包测试开发版本
//--mode 后面需要对用文件的名字.env.development 重点是要和.env.后面的名字对应起来
"build-development": "vue-cli-service build --mode development",
//打包生产版本
//--mode 后面需要对用文件的名字.env.production 重点是要和.env.后面的名字对应起来
"build-production": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
...//json文件太长 后面的没用复制过来 主要看上面的scripts
}
下面我们在app.vue中打印一下我们设置的这个VUE_APP_URL
mounted() {
console.log(process.env,'process.env')
console.log(process.env.VUE_APP_URL, "VUE_APP_URL");
}
我们在本地运行
npm run serve
会加载.env和.env.development两个文件
我们会看到控制台打印
可以看到 process.env是一个全局对象 我们可以在对象上加自己需要的属性
在运行npm run serve的时候它会自动编译 测试开发版本 所以能加在.env.development文件的变量
我们尝试打包生产版本
npm run build-production
会在文件根目录生成dist文件夹
我们尝试在本地打开dist 运行vue打包好的文件
我们需要在全局安装 http-server 这个npm包
npm i -g http-server
我们进到 dist文件夹中
打开cmd
执行http-server
在浏览器打开 看看控制台打印
确实 就是我们在app.vue下打印的变量，值就是我们在.env和.env.production里面设置的值；
由此 大大的方便了我们的打包流程，不需要每次打包测试URL、生产URL来回切换了~
我们可以将这个VUE_APP_URL封装到axios中 更加方便了我们开发~
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue.js应用中,动态表单是一个常见的需求,尤其是当表单字段的数量和类型需要根据用户输入或系统状态动态变化时,本文将详细介绍如何在Vue中实现动态表单的创建,并通过多个示例展示具体的实现方法,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了VUE elTree无子级隐藏展开图标方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue $router和$route的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
本篇文章主要介绍了使用vue构建移动应用实战代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了Vue混入mixins滚动触底的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
下面小编就为大家分享一篇基于vue2.0动态组件及render详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
在vue中经常会用到数据请求,下面这篇文章主要给大家介绍了关于Vue使用ajax(axios)请求后台数据的方法教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue 组件上的v-model双向绑定原理,从本文的学习可以知道组件上v-model指令的本质也是生成了value属性和input事件，具体实例代码跟随小编一起看看吧2022-05-05
这篇文章主要为大家详细介绍了vue实现商品规格选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
使用VUE3开发很久了,但一直没进行总结和记录,下面这篇文章主要给大家介绍了关于从零开始搭建vue3项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-06-06
最新评论