Vue项目在vue.config.js文件中使用env文件数据方法

最新推荐文章于 2023-07-25 11:25:05 发布
最新推荐文章于 2023-07-25 11:25:05 发布
阅读量3.1k 收藏 4
点赞数 3
分类专栏： # Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38038472/article/details/118501508
版权

Vue项目在vue.config.js文件中使用env文件数据方法

  1. 在.env文件中添加一个属性

    如：

    VUE_APP_SERVER_PATH = 'http://localhost:9011'

    一定要VUE_APP开头，且值需要带单引号
    在这里插入图片描述

  2. 在vue.config.js文件中调用VUE_APP_SERVER_PATH属性

    let serverPath = process.env.VUE_APP_SERVER_PATH;

  3. 使用serverPath变量
    在这里插入图片描述

  4. 测试
    在这里插入图片描述
    在这里插入图片描述
    跨域请求成功！

云·泽
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题
qq_37635012的博客
03-19 246
由于我们的项目需要在不同环境下进行运行(开发，生产，测试等)，这避免我们需要多次的去切换请求的地址以及相关的配置，vue-cli2是可以直接在config文件中进行配置的，但是vue-cli4和vue-cli3已经简化了，没有config文件怎么办？既然知道项目运行的是那个模式，是不是我们就可以在不同模式下运行不同的变量信息，如开发环境使用端口8080，线上（生产）环境的端口是80，这个时候你会想，我知道不同模式配置不同信息，那信息配置在那个文件呢。需要注意的是，以上方法适用于开发环境下解决跨域问题。
vue-cli配置文件——config篇
11-27
最近一直在研究webpack，突然想看看vue-cli中的webpack是如何配置，查阅了很多相关的文章，所以也想出几篇关于vue-cli配置的东西。正所谓“工欲善其事必先利其器”嘛！这一篇主要是分析vue中关于 config文件夹中的相关代码 ； 首先我们先看一下config的文件结构： |-config |---dev.env.js |---index.js |---prod.env.js 打开我们的vue项目文件夹我们可以清楚的看到文件夹下的三个文件， “dev.env.js” ， “index.js” ， “prod.env.js” ，我们先打开prod.env.js的文件，看里面的
Vue.js 打造高级实战-音乐 App
04-28
# vue-music > Vue.js 打造高级实战——音乐 App ## 项目树 ``` . ├── README.md ├── build │   ├── build.js │   ├── check-versions.js │   ├── dev-client.js │   ├── dev-server.js │   ├── utils.js │   ├── vue-loader.conf.js │   ├── webpack.base.conf.js │   ├── webpack.dev.conf.js │   └── webpack.prod.conf.js ├── config │   ├── dev.env.js │   ├── index.js │   └── prod.env.js ├── index.html ├── package.json ├── prod.server.js ├── src │   ├── App.vue │   ├── api │   │   ├── config.js │   │   ├── rank.js │   │   ├──
vue2中配置环境变量的方法
dong123456nbnb的博客
07-25 896
首先要创键三个文件，分别为.env.development（开发环境） .env.production（生产环境） .env.test（测试环境），跟package.json目录是同级文件。
vue项目中设置环境变量 .env
AdleyTales的技术博客
07-23 901
.env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略 需要以***VUE_APP_***开头，比如VUE_APP_XXX .env 全局默认配置文件，不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.prod
vue-cli3 配置 vue.config.js 环境变量env
没有翅膀的我们，只是随便认为不能飞而已
10-13 7136
const path = require("path"); const uglifyJsPlugin = require("uglifyjs-webpack-plugin"); const IsProduction = process.env.NODE_ENV === "production"; // 引入文件 function resolve(dir) { return path.jo...
Vue3.0开发入门之vue.config.js和.env配置文件的说明和使用
光滑的秃头
06-10 1776
Vue3.0开发入门之vue.config.js和.env配置文件的说明和使用 第一步搭建Vue3.0项目 见文章：vue3.0脚手架搭建 vue.config.js vue.config.js 是全局 CLI 配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。 官方具体说明地址：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%
vue 3 第三十六章：vite环境变量（.env文件的配置及使用）
热门推荐
to_the_Future的博客
06-11 1万+
通过使用.env文件，我们可以轻松管理不同环境下的配置。在Vite的应用程序中，可以使用import.meta.env对象来访问环境变量，并根据不同的环境使用不同的配置。这样可以使我们的应用程序更加灵活和易于维护。
【VUE】关于vue.config.js的小知识（一）
Lanna_w的博客
10-23 2272
更多文章欢迎关注公众号“三横兰” vue.config.js 当我们想要定义一些全局变量，比如常用的包管理器或者部署应用包的基本URL时，可以通过vue.config.js配置文件定义。这个文件是可选的，如果在项目的根目录下，那么它会被 @vue/cli-service 自动加载，比如我们常用到的vue-cli-service serve或者vue-cli-service build。当然，如果不想用这个文件，也可以直接写在package.json的vue字段。如果根目录下存在vue.config.js文件
vue项目配置env
qq_45061876的博客
02-10 4922
vue项目配置env
vue 项目的 env 文件使用
JSN___的博客
03-06 573
vue 项目的 env 文件使用 为了让开发者头疼的开发环境问题… 文件(在项目根目录新建) .env 无论开发环境还是生成环境都会加载 .env.development 开发环境加载这个文件 .env.production 生成环境加载这个文件 注意 env 文件需要声明运行的环境 .env.development NODE_ENV = development .env.production NODE_ENV = production 定义变量需要以 VUE_APP_ 作为前缀 .env.develo
vue.config.js常用配置详解
12-13
vue-cli3的一些服务配置都迁移到CLI Service里面了，对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置 module.exports = { // 选项... } 基本路径 baseUrl从 Vue CLI 3.3 起已弃用...
vue-cli-plugin-env:从vue.config.js文件定义环境常量
05-01
从vue.config.js文件定义环境常量 yarn add --dev vue-cli-plugin-env vue.config.js module . exports = { pluginOptions : { env : { MY_KEY : 'foo' , SECRET : 5566 } } } main.js console . log ( ...
vue配置文件实现代理v2版本的方法
01-21
 模仿vue中.env.local文件，此文件被git忽略，且可根据当前环境变量加载不同的数据，由此在项目根目录下新建development文件夹，在development文件加下建立config文件夹，用户放置配置文件，config下目前暂有两个...
node-v12.16.3-x86.msi
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
云计算基础课件—架构dr.pptx
04-25
云计算基础课件—架构dr.pptx
067ssm-jsp-mysql艺诚美业管理系统.zip（可运行源码+数据库文件+文档）
04-25
L文主要是对艺诚美业管理系统进行了介绍，包括研究的现状，还有涉及的开发背景，然后还对系统的设计目标进行了论述，还有系统的需求，以及整个的设计方案，对系统的设计以及实现，也都论述的比较细致，最后对艺诚美业管理系统进行了一些具体测试。 本文以JSP为开发技术，实现了一个艺诚美业管理系统。艺诚美业管理系统的主要使用者分为管理员；个人中心、会员管理、员工管理、员工打卡管理、技师预约管理、发型美容师管理、技师类型管理、套餐信息管理、套餐类型管理、套餐购买管理、会员充值管理、系统管理，员工；个人中心、员工打卡管理、技师预约管理，会员；个人中心、技师预约管理、套餐购买管理、会员充值管理，前台首页；首页、发型美容师、套餐信息、我的、跳转到后台等功能。通过这些功能模块的设计，基本上实现了整个艺诚美业管理系统的过程。 具体在系统设计上，采用了B/S的结构，同时，也使用JSP技术在动态页面上进行了设计，后台上采用Mysql数据库，是一个非常优秀的艺诚美业管理系统。 关键词 ：艺诚美业管理系统；JSP技术；Mysql数据库；B/S结构
【微信小程序毕业设计】外卖点餐系统开发项目(源码+演示视频+说明).rar
04-25
【微信小程序毕业设计】外卖点餐系统开发项目(源码+演示视频+说明).rar 【项目技术】 微信小程序开发工具+java后端+mysql 【演示视频-编号：242】 https://pan.quark.cn/s/cb634e7c02b5 【实现功能】 有管理员，外卖员，餐厅，用户共四个角色。管理员功能有个人中心，外卖员管理，餐厅管理，用户管理，菜品分类管理，菜品信息管理，外卖订单管理，订单配送管理，订单评价管理，在线留言管理，系统管理等。外卖员，餐厅，用户都可以在微信小程序上面进行注册和登录操作。餐厅角色可以在微信小程序上面进行菜品的添加，修改，删除，查询操作，可以对用户的订单进行审核操作，查看订单配送状态和评价，可以查看投诉反馈和在线留言等。外卖员角色可以在微信小程序上面进行订单的抢单操作，查看订单配送和评价信息等。 用户角色可以在微信小程序上面进行菜品的查看和查询，对自己下的订单进行支付操作，查看订单配送和对订单评价，收藏菜品等操作。
oplog4j是java项目生成操作日志的工具，兼容spring（高分项目）.zip
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
vue项目中vue.config.js文件使用外部js中的变量
05-10
在Vue项目的开发过程中，我们可能需要在vue.config.js中使用一些外部js文件中的变量。这个过程有些麻烦，但是我们可以通过一些方法来解决它。 第一种方法是在vue.config.js中直接引入变量所在的js文件。这个过程需要使用Node.js的fs模块读取文件并且解析出变量。在读取js文件之后，我们将其转换为字符串，然后使用eval()函数解析其内容并获取变量的值。 第二种方法是将变量存储在一个环境变量中，然后在vue.config.js中使用这个环境变量。在项目的根目录中创建.env文件，并在其中定义变量。例如，在.env文件中定义一个名为VAR的变量：VAR=value。然后在vue.config.js中，我们可以使用process.env.VAR来获取变量的值。 第三种方法是在webpack中添加一个plugin，在vue.config.js中访问该plugin。具体地，我们可以编写一个名为VariablePlugin的plugin，其作用是在编译过程中将变量注入到代码中。在vue.config.js中可以使用此变量。 需要注意的是，在使用这些方法时，我们需要小心处理变量的作用域和类型。如果变量定义在一个函数中，我们需要确保在vue.config.js中可以访问到它。并且在使用变量时，需要考虑到它的类型和值的安全性，避免注入攻击或其他安全问题。 总的来说，在vue.config.js中使用外部js文件的变量是一个需要小心思考和处理的问题。我们需要选择适合我们项目的解决方案，并且保证在实际使用中不会出现任何问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值