vue生产环境和开发环境变量配置

最新推荐文章于 2024-08-23 10:24:42 发布
最新推荐文章于 2024-08-23 10:24:42 发布
阅读量586 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyw3390199/article/details/113780171
版权

在这里插入图片描述
新建一个.env.development文件，在里面我们定义一个环境变量，必须以VUE_APP开头：

VUE_APP_SOMETHING = 'something here'

然后我们重启项目(必须)，再打印这个值：

console.log(process.env.VUE_APP_SOMETHING)

在这里插入图片描述

Akimoto Hiroshi
关注
专栏目录
详解vue+axios给开发环境和生产环境配置不同的接口地址
10-16
7. **配置文件和实例化axios**：在Vue组件中，可以在`created`钩子函数中配置axios实例，设置接口前缀，并根据环境变量判断当前是开发环境还是生产环境，从而决定使用哪个接口前缀。例如，使用环境变量`process.env....
vue3.0环境变量配置.md
04-08
vue3.0环境变量配置大致思路： 1，创建修改相关配置文件（Ctrl + C V即可） 2，封装 axios（根据配置文件，首先判断当前环境，获取对应环境的数据库地址作为当前环境下的基础地址，**拼接到** axios 里面的 url ） 3...
【VUE】记录一次 VUE中配置生产环境和开发环境方法
Mrerlou的博客
01-18 3364
我这里 使用Vue CLI（Vue Command Line Interface）创建Vue.js项目是一种简单的方式，它提供了一个交互式的命令行工具来帮助你初始化和管理Vue.js项目。并且我这个项目需要区分生产环境和开发环境。这里具体完整记录下，整个过程。以下内容来自：模式是 Vue CLI 项目中一个重要的概念。模式用于test模式用于production模式用于和你可以通过传递 --mode 选项参数为命令行覆写默认的模式。
vue-cli3 配置开发与测试环境详解
11-29
需求 首先介绍一下本项目的背景，是基于 vue-cli3.1.1 的单页应用，目前测试环境和生产环境都在线上，并且都在同一个域名下，其中生产环境部署在根目录下，测试环境部署在名为 test 的子目录下，根据生产环境和测试环境的不同，某些界面和交互有细微的差别。 根据以上项目的基本情况，分析出需求如下： 实现区分线上生产环境和线上测试环境的环境变量，供项目代码中全局使用。 实现输入一行命令，执行两条指令，分别打包线上生产环境和线上测试环境的代码。 实现打包之后，自动将打包好的文件夹分别按照项目名+时间+环境的格式压缩成 zip 文件 配置环境变量和模式 根据 vue-cli3 文
在vue中配置开发环境，测试环境，生产环境
最新发布
yodoyskts的博客
08-23 336
前言：开发过程、测试过程、生产过程使用的接口地址不能，还有执行的操作可能也不一样，也就需要实现配置好开发环境、测试环境、生产环境，需要什么环境下的配置直接使用即可。现在就算配置好啦，在打包的时候npm run build就是打包生产的;npm run test就是打包测试的。我在写这篇文章的时候图片取自不同项目，变量名可根据自己的情况来定，如果有解决不了的问题可以在评论区留言讨论。
vue的环境配置 生产环境和开发环境配置
热门推荐
放荒
10-19 1万+
vue的环境配置 vue本身就已经自带了serve环境变量（development）和build环境变量（production） 直接在api文件中写： // 不同环境不同地址 const apis = { production: 'http://www.api.lalala.com', // 线上 (生成环境) development: 'http://192.168.8.***:80'...
vue配置开发环境和生产环境
xia_tian666的博客
09-23 9856
本文主要介绍开发、测试以及生产环境的配置。
vue项目配置生产环境和开发环境
weixin_45897915的博客
12-28 362
首先创建三个文件 当环境变量找不到时，会去找，.env里的变量 .env.development 开发环境获取 .env.production 生产环境是获取 package.json修改一下 获取的话就是 process.env.‘你定义的变量名’
vue项目环境变量配置的实现方法
12-09
实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = '...
vue项目打包之开发环境和部署环境的实现
10-15
在开发Vue项目时，我们经常需要处理不同的环境设置，包括开发环境和部署环境。这是因为两者的需求和配置有所不同。开发环境中，我们通常使用模拟数据、热重载和快速反馈，而部署环境中，我们需要优化代码、合并资源...
vue开发环境以及生产环境
04-11
打包了vue的开发环境以及生产环境。开发环境有详细的报错提示。生产环境更加友好。
深入浅析vue全局环境变量和模式
11-21
每个模式都可以有自己的环境变量配置文件，模式特定的文件优先级高于通用的`.env`文件。例如，`.env.production`的变量会覆盖`.env`中的相同变量。 在Vue应用中，可以通过`process.env.NODE_ENV`来获取当前应用的...
vue 配置生产环境 开发环境
郑州彭于晏
08-06 585
prod API_ROOT: ‘“生产环境”’ 'use strict' module.exports = { NODE_ENV: '"production"', API_ROOT: '"生产环境"' } dev API_ROOT: ‘“http://192.168.3.139:9300”’ 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.expo
VUE配置生产环境,开发环境详解
wenrou____的博客
02-28 1074
1.main.js 将main.js的代码拷贝到dev_env.js,prod_env.js中,然后删除main.js // 删除指定入口文件,将入口文件按照环境进行区分 2.添加文件 .env.development .env.production // .env.development NODE_ENV = 'development' VUE_APP_MODE = 'development' VUE_APP_API_URL = 192.168.### HOST_DOWN = 192.168.### /
Vue开发环境和生产环境的配置
qq_31066285的博客
11-09 1272
配置文件 .env.development：开发环境下的配置文件,执行npm run serve命令，会自动加载.env.development文件. .env.production：生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件 命名规则 属性名必须以VUE_APP_开头 比如VUE_APP_BASE_API_D .env.development文件配置 ENV = 'development' VUE_APP_BASE_API_D = 'h
vue项目配置生产、测试和开发环境
weixin_43930421的博客
05-28 4866
目前的 web 项目开发基本都是基于前后端分离的模式。 在实际的开发过程中，从开发到测试完成、发布到线上所调用到的接口地址可能都不一样，那就需要在项目中分别配置各个环境的接口地址（或者域名，也可以定义不同环境下的不同变量）。 首先，在项目根目录下新建3个文件 .env 、.env.test、 .env.production 第二步，编辑文件 .env（开发环境） NODE_ENV=development VUE_APP_API_URL= 'http://localhost:8080/' // 开发接口域名
vue项目开发环境和生产环境代理的配置问题
Zing_ing的博客
07-26 2336
跨域解决方案：1.JSONP 通过动态 script标签跨域2.document.domain + iframe跨域4.window.name + iframe跨域5.postMessage 跨 window 通信6.跨域资源共享（CORS）7.nginx代理跨域8.nodejs中间件代理跨域9.WebSocket协议跨域10.Vue CLI proxy 代理跨域（vue.config,js配置）
vue生产环境和开发环境配置
07-27
在Vue中，配置生产环境和开发环境的方法如下： 1. 开发环境配置： 在开发环境中，你可以使用Vue CLI提供的一些默认配置来方便地进行开发。你可以使用`vue create`命令创建一个新的Vue项目，然后在项目根目录下找到`.env.development`文件。在这个文件中，你可以设置一些开发环境的变量，比如API的地址等。例如： ``` VUE_APP_API_URL=http://localhost:8080/api ``` 你可以在你的代码中通过`process.env.VUE_APP_API_URL`来使用这个变量。 2. 生产环境配置： 在生产环境中，你需要对Vue应用进行一些优化和配置。同样，在项目根目录下找到`.env.production`文件，可以设置一些生产环境的变量。例如： ``` VUE_APP_API_URL=https://api.example.com ``` 同样，你可以在你的代码中通过`process.env.VUE_APP_API_URL`来使用这个变量。 此外，你还可以通过修改`vue.config.js`文件来进行更多的配置。比如，在生产环境中启用代码压缩和文件哈希等。 以上是基本的配置方法，具体的配置还取决于你的项目需求和开发环境。你可以根据需要进行进一步的配置和优化。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值