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

最新推荐文章于 2025-02-27 16:35:08 发布
原创 最新推荐文章于 2025-02-27 16:35:08 发布 · 375 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何在使用vue-cli搭建的Vue项目中区分开发环境和生产环境。开发环境通过npm rundev启动，配置位于config/dev.env.js；生产环境通过npm runbuild打包，配置位于config/prod.env.js。此外，还讲解了如何在不同环境下设置API_HOST。

使用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 1419
配置文件 .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配置开发环境与生产环境
leleshuo
06-10 587
开发环境 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配置开发环境和生产环境
热门推荐
xia_tian666的博客
09-23 1万+
本文主要介绍开发、测试以及生产环境的配置。
vue-ueditor-wrap富文本编辑框的配置和使用(vue3)
10-30
这不仅能够提升用户体验，还能确保在生产环境中稳定运行。 在现代前端开发中，一个优秀的富文本编辑器组件能够大大提升开发效率和用户体验。通过以上内容，我们可以看到vue-ueditor-wrap在Vue 3项目中的配置和使用...
vue-cli3 配置开发与测试环境详解
10-16
首先，我们了解到本文所讨论的项目是一个基于vue-cli3.1.1版本的单页应用（SPA），该项目的生产环境和测试环境都部署在同一个域名下的不同路径中。在这样的部署场景中，环境变量对于区分不同的服务环境就显得尤为...
精选资源
前端开发-Vue3-Vite-VSCode-Volar-热重载-生产构建-现代Web应用-基于Vue3和Vite的电子商务前端开发模板-包含开发环境配置-生产环境优化-代码热更新-.zip
最新发布
06-23
在本篇文章中，我们将详细探讨前端开发领域中的一项重要技术栈，它涉及Vue3、Vite、VSCode以及Volar等现代前端开发工具，并结合一个具体的电子商务前端开发模板，涵盖开发环境配置、生产环境优化以及代码热更新等多...
在vue中配置开发环境，测试环境，生产环境
yodoyskts的博客
08-23 842
前言：开发过程、测试过程、生产过程使用的接口地址不能，还有执行的操作可能也不一样，也就需要实现配置好开发环境、测试环境、生产环境，需要什么环境下的配置直接使用即可。现在就算配置好啦，在打包的时候npm run build就是打包生产的;npm run test就是打包测试的。我在写这篇文章的时候图片取自不同项目，变量名可根据自己的情况来定，如果有解决不了的问题可以在评论区留言讨论。
详解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 635
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 766
通过以上步骤，你可以根据不同的环境（开发、生产、测试）配置不同的 API 请求 URL 和其他环境变量，确保代码在不同环境下的灵活配置和运行。
【VUE】记录一次 VUE中配置生产环境和开发环境方法
Mrerlou的博客
01-18 4442
我这里 使用Vue CLI（Vue Command Line Interface）创建Vue.js项目是一种简单的方式，它提供了一个交互式的命令行工具来帮助你初始化和管理Vue.js项目。并且我这个项目需要区分生产环境和开发环境。这里具体完整记录下，整个过程。以下内容来自：模式是 Vue CLI 项目中一个重要的概念。模式用于test模式用于production模式用于和你可以通过传递 --mode 选项参数为命令行覆写默认的模式。
VUE配置生产环境,开发环境详解
wenrou____的博客
02-28 1170
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 645
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设置开发环境和生产环境
qq_41429765的博客
10-04 227
【代码】Vue设置开发环境和生产环境。
vue-cli3配置开发环境和生产环境
axp30398的博客
08-12 1966
1.Vue-cli3 搭建Vue 项目 1、创建出的项目和以往的有了很多的变化，目录及命令有也是。尤其是config文件夹已经没有了。如图： 2、那么我以往中需要在config中文件一些生产环境，或者跨域处理现在得自己在根目录下创建了。 1 创建普通全局变量 .env 2 创建开发环境变量 .env.development 3 创建生产环境变量 .env.pr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值