Vue无法访问.env.development定义的变量值问题及解决

目录
  • Vue无法访问.env.development定义的变量值
  • vue中.env | .env.development | .env.production使用
    • vue-cli-service build 自定义参数
  • 总结

Vue无法访问.env.development定义的变量值

在.env.development定义变量时，发现获取不取值。

比方：原来的定义的一个变量，是可以访问的

VUE_APP_BASE_API = '/dev-api'

上面的是可以访问的

后来发现有多个接口，需要调用不同地址访问，就需要配置多个代理服务器的IP，我自己又定义了一个服务器地址：APP_DEV_USER_API = ‘/devApi’

输出是：undefined

后来翻看官方文档发现定义变量必须以：VUE_APP_XXXX 开头

VUE_APP_PRO_API = '/proApi'

vue中.env | .env.development | .env.production使用

  • .env——全局默认配置文件，无论什么环境都会加载合并
  • .env.development——开发环境下的配置文件
  • .env.production——生产环境下的配置文件

注意：属性名必须以VUE_APP_开头，比如VUE_APP_xxx = "变量"

首先在跟目录创建三个文件

分别是.env.development、.env.production、.env.staging三个文件

# 页面标题
VUE_APP_TITLE = 若依管理系统

// .env.development文件里编写，NODE_ENV default is development

# 开发环境配置
ENV = 'development'

# 若依管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 页面标题
VUE_APP_TITLE = 若依管理系统

# 生产环境配置
ENV = 'production'

# 若依管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'

// .env.production文件里编写 NODE_ENV default is production
# 页面标题
VUE_APP_TITLE = 若依管理系统

NODE_ENV = production

# 测试环境配置
ENV = 'staging'

# 若依管理系统/测试环境
VUE_APP_BASE_API = '/stage-api'

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",    // 打包生产环境

总结

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

赞 (0)

相关推荐

  • vue中环境变量的使用与配置讲解

    目录 为什么需要配置环境变量和模式呢? 环境变量 1)环境变量文件分类 2)环境变量配置 3)环境变量访问 模式 1)模式分类 2)模式定义与使用 结合实际应用 为什么需要配置环境变量和模式呢? 所有方法肯定是来源于现实的需求.在一个产品的前端开发过程中,一般来说会经历本地开发.测试脚本.开发自测.测试环境.预上线环境,然后才能正式的发布. 对应每一个环境可能都会有所差异,比如说用户访问资源权限.服务器地址.接口地址等.在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方

  • Vue中.env、.env.development及.env.production文件说明

    Vue中.env、.env.development及.env.production文件说明

    目录 0.介绍 2.命名规则 3.关于文件的加载: 4.关于使用 4.1 在.vue文件中使用 4.2 在.js文件中 5.自定义环境 总结 0.介绍 模式是Vue CLI项目中一个重要的概念,默认情况下,一个Vue CLI项目有三种模式: developemt 模式用于vue-cli-service serve test 模式用于vue-cli-service test:unit production 模式用于vue-cli-service build 和vue-cli-service tes

  • vue3+vite使用环境变量.env的一些配置情况详细说明

    目录 1.设置.env中的内容信息 注意vue3+vite 必须使用VITE开头的配置信息 否则无法获取 2.在 vite 中使用环境变量,可以用 import.meta.env,有四种环境变量,如下所示: 3.使用环境变量 4.配置env.d.ts文件,为环境变量增加智能提示 5.在package.json中配置模式 补充:Vue3的Env环境变量配置的应用 总结 在项目文件中新建文件.env .env.pro 两个文件其中.env 是默认设置 .env.pro 为正式环境设置 1.设置.en

  • Vue无法访问.env.development定义的变量值问题及解决

    目录 Vue无法访问.env.development定义的变量值 vue中.env | .env.development | .env.production使用 vue-cli-service build 自定义参数 总结 Vue无法访问.env.development定义的变量值 在.env.development定义变量时,发现获取不取值. 比方:原来的定义的一个变量,是可以访问的 VUE_APP_BASE_API = '/dev-api' 上面的是可以访问的 后来发现有多个接口,需要调用不

  • vue项目使用.env文件配置全局环境变量的方法

    关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件 .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 关于文件内容: 注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX .env: .env.development: 关于文件的加载: 根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说"不要乱起名,也无需专门控制加

  • vue项目中使用bpmn-自定义platter的示例代码

    内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

  • 浅谈vue项目,访问路径#号的问题

    刚入手vue,有好多的疑问,目前遇到的是vue项目启动之后,输入http://ip:port,我发现浏览器里面显示的地址栏竟然是http://ip:port/#/,这个"/#/"不知道是什么东西,于是百度查了一下. 原因:对于vue开发的单页面应用,我们在切换不同的页面的时候,可以发现html永远只有一个,这也正是称之为单页面的原因.而vue-router默认hash模式--------使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载.因为对于正常的页面

  • vue cli中env的使用指南

    目录 前言 简介-官方 示例配置 前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 test-单测)模式.其实这是小伙伴们没有理解 vueCli 文档所导致的. vueCli 命令中 --mode 对应的 .env.[mode],而不是 NODE_ENV 注意 除了 VUE_APP_ 变量之外. 还有两个特殊的变量: NODE_ENV: 是 develo

  • vue关于eslint空格缩进等的报错问题及解决

    vue关于eslint空格缩进等的报错问题及解决

    目录 关于eslint空格缩进等的报错问题 解决办法有四种 eslint使用规则和各种报错对应规则 ESLint 主要有以下特点 关于eslint空格缩进等的报错问题 解决办法有四种 1. 在.eslintrc.js文件中添加如下代码: rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production'

  • vue-cli3访问public文件夹静态资源报错的解决方式

    今天在项目中使用了public文件夹里的静态资源,在本地测试没有发现问题,但是项目部署到fat服务器却报了404错误. 我发现原因在于我的项目没有部署在域名的根部,而我引用public文件是通过绝对路径方式引用的,因为就出现了路径错误. 路径如下: <img :src="`/image1.png`"> 在官网文档中发现这种情况需要为 URL 配置 publicPath 前缀:process.env.BASE_URL 正确的引用路径是: <img :src="

  • Java 反射修改类的常量值、静态变量值、属性值实例详解

    前言 有的时候,我们需要修改一个变量的值,但变量也许存在于 Jar 包中或其他位置,导致我们不能从代码层面进行修改,于是我们就用到了下面的场景,通过反射来进行修改变量的值. 定义一个实体类 class Bean{ private static final Integer INT_VALUE = 100; } 利用反射修改私有静态常量方法 System.out.println(Bean.INT_VALUE); Field field = Bean.class.getField("INT_VALUE

  • Vue 2.5.2下axios + express 本地请求404的解决方法

    最近在学习Vue,今天尝试了使用axios模拟本地网络请求.使用的过程中发现接口请求一直404,后来发现在当期的Vue-cli构建的最新的项目中,接口请求应该这样写. 1.引入相关依赖 var axios = require('axios') const express = require('express'); var app = express(); var apiRoutes = express.Router(); app.use('/api', apiRoutes); 2.处理网络请求

随机推荐