vue项目配置生产环境和开发环境

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


首先创建三个文件
当环境变量找不到时，会去找，.env里的变量
.env.development 开发环境获取
.env.production 生产环境是获取
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
package.json修改一下
在这里插入图片描述

获取的话就是 process.env.‘你定义的变量名’

详解vue+axios给开发环境和生产环境配置不同的接口地址
12-02
在不同的环境（开发环境和生产环境）下，接口地址的配置是不同的，这是为了确保应用能够正常工作并保证安全性。 首先，让我们了解一下为什么需要配置不同的接口地址。在开发环境中，前端通常运行在本地开发服务器上...
详解vue-cli项目开发/生产环境代理实现跨域请求
01-19
开发环境中跨域 使用vue-cli创建的项目，开发地址是localhost:8080，需要访问非本机上的接口http://192.168.0.112:8080/cms/queryMaterial。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要...
vue开发环境以及生产环境
04-11
打包了vue的开发环境以及生产环境。开发环境有详细的报错提示。生产环境更加友好。
Vue开发环境和生产环境的配置
qq_31066285的博客
11-09 1326
配置文件 .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配置开发环境和生产环境
热门推荐
xia_tian666的博客
09-23 1万+
本文主要介绍开发、测试以及生产环境的配置。
VUE配置生产环境,开发环境详解
wenrou____的博客
02-28 1117
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中配置开发环境，测试环境，生产环境
最新发布
yodoyskts的博客
08-23 661
前言：开发过程、测试过程、生产过程使用的接口地址不能，还有执行的操作可能也不一样，也就需要实现配置好开发环境、测试环境、生产环境，需要什么环境下的配置直接使用即可。现在就算配置好啦，在打包的时候npm run build就是打包生产的;npm run test就是打包测试的。我在写这篇文章的时候图片取自不同项目，变量名可根据自己的情况来定，如果有解决不了的问题可以在评论区留言讨论。
vue项目打包之开发环境和部署环境的实现
10-15
在开发Vue项目时，我们经常需要处理不同的环境设置，包括开发环境和部署环境。这是因为两者的需求和配置有所不同。开发环境中，我们通常使用模拟数据、热重载和快速反馈，而部署环境中，我们需要优化代码、合并资源...
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
08-27
这两个文件分别用于开发环境和生产环境的配置。在这两个文件中，我们可以增加接口地址的配置，例如： `config/dev.env.js`： ``` module.exports = { API: 'https://dev.example.com/api' } ``` `config/prod.env...
【VUE】记录一次 VUE中配置生产环境和开发环境方法
Mrerlou的博客
01-18 4033
我这里 使用Vue CLI（Vue Command Line Interface）创建Vue.js项目是一种简单的方式，它提供了一个交互式的命令行工具来帮助你初始化和管理Vue.js项目。并且我这个项目需要区分生产环境和开发环境。这里具体完整记录下，整个过程。以下内容来自：模式是 Vue CLI 项目中一个重要的概念。模式用于test模式用于production模式用于和你可以通过传递 --mode 选项参数为命令行覆写默认的模式。
vue生产环境和开发环境变量配置
Hiroshi's
02-10 616
新建一个.env.development文件，在里面我们定义一个环境变量，必须以VUE_APP开头： VUE_APP_SOMETHING = 'something here' 然后我们重启项目(必须)，再打印这个值： console.log(process.env.VUE_APP_SOMETHING)
vue的环境配置 生产环境和开发环境配置
真真的博客
06-29 1万+
vue的环境配置 生产环境和开发环境配置
vue 配置生产环境 开发环境
郑州彭于晏
08-06 609
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(12)--开发环境和生产环境的配置
tansy_big_rabbit的博客
04-01 337
111
做法一: vue-cli(webpack)配置开发环境、测试环境、生产环境
qq_45404003的博客
06-19 2501
由于开发环境、测试环境、生产环境三者是放在不同的服务器导致请求的接口URL地址不同，所有需要配置根据不同的环境使用不同的服务器地址。
vue配置开发环境与生产环境
leleshuo
06-10 536
开发环境 1、安装node.js 官网：从这里下载node版本并安装，安装后node -v 检查版本是否安装成功。 2、在项目目录下新建.env.development文件 全局配置ajax请求路径：如’http:/xxx.xxx.test 3、在main.js中配置开发环境所需要的配置 if (process.env.NODE_ENV == 'development') { VueCookies.get('admin_id') || api.adminDoLogin(); VueCookies.
vue环境搭建详细步骤
09-04 1003
网上搜索博客、视频试着搭建下Vue的开发环境，过程没有视频里那么顺利，花了我几个小时，但我还是要花半小时来总结一下记录下来，避免下次用个新电脑又得搭建环境浪费时间了，下面是我搭建环境的步骤，与君同享，共同学习，若有错误，欢迎吐槽评论！另外，我的电脑是win10系统，看的慕课视频用的Linux系统，在使用命令行时很多都不一样的。 一、NodeJS下载安装 可能没有学习...
vue2 配置生产环境和开发环境步骤
07-27
配置 Vue.js 2.x 的开发环境和生产环境，以下是一些基本的步骤： 1. 开发环境配置： - 安装 Node.js：Vue.js 依赖于 Node.js 运行环境。请确保已经在您的计算机上安装了最新版本的 Node.js。 - 使用 Vue CLI 创建新的 Vue 项目：Vue CLI 是一个官方提供的命令行工具，可以快速创建和管理 Vue 项目。您可以使用以下命令全局安装 Vue CLI： ``` npm install -g @vue/cli ``` - 创建新的 Vue 项目：在命令行中执行以下命令以创建新的 Vue 项目： ``` vue create my-project ``` - 进入项目目录并启动开发服务器：使用以下命令进入项目目录并启动开发服务器： ``` cd my-project npm run serve ``` - 开发环境配置文件：在项目根目录下会有一个 `.env.development` 文件，您可以在此文件中设置开发环境所需的配置项，如 API 地址、调试模式等。这个文件会在开发过程中被自动加载。 2. 生产环境配置： - 生产环境变量配置文件：在项目根目录下会有一个 `.env.production` 文件，您可以在此文件中设置生产环境所需的配置项，如 API 地址、版本号等。这个文件会在构建生产版本时被自动加载。 - 构建生产版本：使用以下命令构建生产版本的代码： ``` npm run build ``` - 部署生产版本：构建完成后，会生成一个 `dist` 目录，里面包含了打包好的生产代码。将该目录下的文件部署到服务器上即可。 这些是配置 Vue.js 2.x 的开发环境和生产环境的基本步骤。请根据实际需求进行适当的配置和优化。如果需要更详细的信息和指南，建议查阅 Vue.js 官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值