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实现城市列表选择功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了vue3+ts+axios+pinia实现无感刷新方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue路由跳转传参或者打开新页面跳转问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
小编给大家通过本文详细介绍了关于vue.js项目的构建、打包、发布的全过程，文章很以后价值，值得你参考。2017-11-11
Tag组件其实是一个很小的组件，业务价值很低，主要用于Vue新手入门。主要实现Vue常用的父组件改变子组件的值，view改变model，model的变化反应到view上，事件的绑定等功能。下面跟着小编一起来看下吧2017-01-01
本篇文章主要介绍了Vue组件通信之Bus的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了解决element-ui el-checkbox的一些坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue 表单输入绑定v-model，v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值，属性中的值更新了会自动更新表单中的值 ，下面一起进入文章来哦姐文章详情内容2021-10-10
今天小编就为大家分享一篇vue实现设置载入动画和初始化页面动画效果，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
今天小编就为大家分享一篇浅谈vue引用静态资源需要注意的事项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论