脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-cli环境变量process.env使用

vue-cli 环境变量 process.env的使用及说明

 更新时间：2022年12月07日 14:43:54   作者：前端抠脚  
这篇文章主要介绍了vue-cli 环境变量 process.env的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue-cli 环境变量 process.env使用

参考官网：  https://cli.vuejs.org/zh/guide/mode-and-env.html#在客户端侧代码中使用环境变量

话不多说直接看代码

在package中的配置如下图

举个本地运行的例子.env.serve；

注意：

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

  • NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
  • BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
NODE_ENV=development
 
VUE_APP_CURRENTMODE=serve
 
VUE_APP_BASEURL=http://clife.ngrok.i84.com.cn
VUE_APP_BASEAPI=http://clife.ngrok.i84.com.cn/

运行 yarn serve在模式下,然后就可以使用当中的全局变VUE_APP_BASEURL

mounted() {
        let baseUrl = process.env.VUE_APP_BASEURL;
        console.log(baseUrl)
}

结果如下

测试test -->  VUE_APP_BASEAPI 为“/”的好处是在切换环境的接口请求直接为当前域名

//该配置为打包到测试服的配置
//该配置保留vconsole插件功能
NODE_ENV=production
VUE_APP_CURRENTMODE=test
VUE_APP_BASEURL=http://clife.ngrok.i84.com.cn
VUE_APP_BASEAPI=/

production -->VUE_APP_BASEAPI 为“/”的好处是在切换环境的接口请求直接为当前域名

//该配置为打包上正式环境配置
NODE_ENV=production
VUE_APP_CURRENTMODE=production
VUE_APP_BASEAPI=/

vue-cli配置环境变量process.env.xxx

官方解释

模式和环境变量 | Vue CLI

自己新建.env.xxx

然后在package.json中,--mode对应.env.xxx的xxx

而.env.test比较特殊,默认NODE_ENV为development,打包时视作单元测试,不会打出css和图片文件,解决办法是可以强行指定为production

使用方法

process.env.xxxx

总结

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

您可能感兴趣的文章:

相关文章

  • vue.js 1.x与2.0中js实时监听input值的变化

    vue.js 1.x与2.0中js实时监听input值的变化

    这篇文章主要介绍了vue.js 1.x与vue.js2.0中js实时监听input值的变化的相关资料，文中介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-03-03
  • vue组件vue-treeselect箭头和叉图标变大问题及解决

    vue组件vue-treeselect箭头和叉图标变大问题及解决

    这篇文章主要介绍了vue组件vue-treeselect箭头和叉图标变大问题及解决方案，具有很好的参考价值，希望对大家有所帮助。
    2022-07-07
  • 浅谈vuex为什么不建议在action中修改state

    浅谈vuex为什么不建议在action中修改state

    这篇文章主要介绍了浅谈vuex为什么不建议在action中修改state，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue 项目集成 electron 和 electron 打包及环境配置方法

    vue 项目集成 electron 和 electron 打包及环境配

    文章介绍了如何使用Vue和Electron开发桌面端应用,包括安装Electron、配置package.json、创建main.js文件、运行和打包应用等步骤,并分享了一些常见的打包错误及其解决方法,感兴趣的朋友一起看看吧
    2025-01-01
  • Vue3中实现div拖拽功能

    Vue3中实现div拖拽功能

    这篇文章主要介绍了Vue3中实现div拖拽功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • Vue echarts实例项目地区销量趋势堆叠折线图实现详解

    Vue echarts实例项目地区销量趋势堆叠折线图实现详解

    Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，因为我的习惯，每次新尝试做一个功能的时候，总要新创建个小项目，做做Demo
    2022-09-09
  • vue实现计数器简单制作

    vue实现计数器简单制作

    这篇文章主要为大家详细介绍了vue实现计数器简单制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue中使用回车键触发事件的方法实现

    Vue中使用回车键触发事件的方法实现

    本文主要介绍了Vue中使用回车键触发事件的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue的keep-alive用法技巧

    vue的keep-alive用法技巧

    在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码，需要的朋友们学习下。
    2019-08-08
  • VUE安装nrm管理多个npm源的方法示例

    VUE安装nrm管理多个npm源的方法示例

    nrm是一个npm源管理器,允许快速切换不同npm源,提高包管理效率,下面就来介绍一下VUE安装nrm管理多个npm源的方法示例,感兴趣的可以了解一下
    2025-01-01

最新评论