VUE(12)--开发环境和生产环境的配置

最新推荐文章于 2025-05-07 19:15:01 发布
最新推荐文章于 2025-05-07 19:15:01 发布
阅读量350 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tansy_big_rabbit/article/details/105228976

使用vue-cli搭建的vue项目要区分开发环境(dev)和生产环境(prod)

开发环境：

使用npm run dev在本地运行时，当前的项目处于开发环境

相关配置文件：config/dev.env.js

注意：前端配置的跨域也是在开发环境中使用，在生产环境要做到跨域则要配合后端设置

生产环境：

使用npm run build打包之后运行时，当前项目处于生产环境

相关配置文件：config/prod.env.js

获取当前环境的api_host： process.env.API_HOST

 

vue开发环境以及生产环境
04-11
打包了vue的开发环境以及生产环境。开发环境有详细的报错提示。生产环境更加友好。
详解vue-cli项目开发/生产环境代理实现跨域请求
01-19
开发环境中跨域 使用vue-cli创建的项目，开发地址是localhost:8080，需要访问非本机上的接口http://192.168.0.112:8080/cms/queryMaterial。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要...
Vue开发环境和生产环境的配置
qq_31066285的博客
11-09 1347
配置文件 .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_39419463的博客
05-07 220
vue配置开发环境和生产环境
热门推荐
xia_tian666的博客
09-23 1万+
本文主要介绍开发、测试以及生产环境的配置。
在vue中配置开发环境，测试环境，生产环境
yodoyskts的博客
08-23 695
前言：开发过程、测试过程、生产过程使用的接口地址不能，还有执行的操作可能也不一样，也就需要实现配置好开发环境、测试环境、生产环境，需要什么环境下的配置直接使用即可。现在就算配置好啦，在打包的时候npm run build就是打包生产的;npm run test就是打包测试的。我在写这篇文章的时候图片取自不同项目，变量名可根据自己的情况来定，如果有解决不了的问题可以在评论区留言讨论。
vue-ueditor-wrap富文本编辑框的配置和使用(vue3)
10-30
这不仅能够提升用户体验，还能确保在生产环境中稳定运行。 在现代前端开发中，一个优秀的富文本编辑器组件能够大大提升开发效率和用户体验。通过以上内容，我们可以看到vue-ueditor-wrap在Vue 3项目中的配置和使用...
vue-cli3 配置开发与测试环境详解
10-16
首先，我们了解到本文所讨论的项目是一个基于vue-cli3.1.1版本的单页应用（SPA），该项目的生产环境和测试环境都部署在同一个域名下的不同路径中。在这样的部署场景中，环境变量对于区分不同的服务环境就显得尤为...
vue新vue-cli3环境配置和模拟json数据的实例
10-17
在Vue开发过程中，环境配置和模拟数据的生成是两个重要的步骤。随着技术的发展，Vue的版本也在不断更新，其中Vue CLI 3作为Vue项目脚手架工具的最新版本，相比之前的版本，在环境配置上做了很多优化和简化。本文将...
前端开发-Vue3-Vite-VSCode-Volar-热重载-生产构建-现代Web应用-基于Vue3和Vite的电子商务前端开发模板-包含开发环境配置-生产环境优化-代码热更新-.zip
最新发布
06-20
前端开发_Vue3_Vite_VSCode_Volar_热重载_生产构建_现代Web应用_基于Vue3和Vite的电子商务前端开发模板_包含开发环境配置_生产环境优化_代码热更新_.zip上传一个【移动应用开发】VIP资源
详解vue+axios给开发环境和生产环境配置不同的接口地址
12-02
为什么要配置不同的接口地址 在开发过程中，前端请求访问的是自己本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try { fs.statSync(path.join(__dirname, '../proxy/' + templatedir + '.json')) //如果可以执行到这里那么就表示存在了 console.log(124) proxyTable = require('../proxy/' + templatedir + '.json') } catch (e) { //捕获异常' }
vue开发环境 生产环境配置
棋子
12-10 607
vue开发环境 生产环境配置 首先生成三个文件 .env .env.development .env.production 他会根据你运行的环境 去自动走相应的文件 .env NODE_ENV = 'production' VUE_APP_FLAG = 'pro' .env.development VUE_APP_BASE_API= http //开发环境的域名 VUE_APP_ENV=...
vue 设置生产 开发 测试环境
m0_75101866的博客
02-27 612
通过以上步骤，你可以根据不同的环境（开发、生产、测试）配置不同的 API 请求 URL 和其他环境变量，确保代码在不同环境下的灵活配置和运行。
【VUE】记录一次 VUE中配置生产环境和开发环境方法
Mrerlou的博客
01-18 4168
我这里 使用Vue CLI（Vue Command Line Interface）创建Vue.js项目是一种简单的方式，它提供了一个交互式的命令行工具来帮助你初始化和管理Vue.js项目。并且我这个项目需要区分生产环境和开发环境。这里具体完整记录下，整个过程。以下内容来自：模式是 Vue CLI 项目中一个重要的概念。模式用于test模式用于production模式用于和你可以通过传递 --mode 选项参数为命令行覆写默认的模式。
vue配置开发环境与生产环境
leleshuo
06-10 551
开发环境 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配置生产环境,开发环境详解
wenrou____的博客
02-28 1132
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的环境配置 生产环境和开发环境配置
真真的博客
06-29 1万+
vue的环境配置 生产环境和开发环境配置
vue 配置生产环境 开发环境
郑州彭于晏
08-06 622
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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值