vue-cli2 ,区分开发环境，测试环境，生成环境的方法

最新推荐文章于 2023-04-18 08:30:00 发布
最新推荐文章于 2023-04-18 08:30:00 发布
阅读量995 收藏
点赞数
分类专栏： vue-cli2 开发环境、生成环境、测试环境变量的设置方式 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/slx924/article/details/108642431
版权
本文介绍了如何在Vue CLI2项目中实现开发、测试和生成环境的区分。通过安装cross-env，修改package.json，配置webpack.prod.conf.js，设置src/config/config.js中的stage_env变量来确定环境，并在axios中根据环境拼接不同域名地址。
摘要由CSDN通过智能技术生成

项目背景

为了适应vue-cli2环境搭建需求，需要动态配置开发，测试，生产三种对应域名及其及打包命令。使用cross-env可以让配置环境更加清晰明了还好管理。

1、安装 cross-env

npm install --save-dev cross-env

2、修改package.json文件

**加粗样式**

3、webpack.prod.conf.js

在这里插入图片描述
在这里插入图片描述

4、src/config/config.js ，取stage_env环境变量。stage_env如果是"dev

最低0.47元/天 解锁文章
slx924
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue npm run build serve时区分生产环境，测试环境,自定义命令
向宇
07-20 2686
vue npm run build serve时区分生产环境，测试环境,自定义命令——from 向宇
基于.NET7 / Vue2分离式的后端解决方案网站开发
weixin_63566741的博客
09-04 328
过程采用分离式开发，系统后端采用C#语言基于.NET环境在Visual Studio平台上开发，系统前端使用Vue.js前端开发框架快速搭建动态单体应用页面。基于此前后端开发的方式开发一款B/S架构软件。 本系统后端采用.NET Core Web API开发框架，通过SqlSugar框架连接SqlServer数据库。前端使用Vue.js前端框架，通过Axios向后端发送网络异步请求获取数据。
Vue 教程(三十八)配置文件环境分离
yuan_xw的专栏
08-10 621
Vue 教程(三十八)配置文件环境分离 修改配置文件 在项目根目录下新建文件夹【build】，在该目录下新建三个文件分别为：【base.config.js】、【prod.config.js】【dev.config.js】 base.config.js 内容如下： // 导入Node中path常量 const path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("ht
vue、小程序项目中查看当前是什么环境
qq_68155756的博客
04-18 956
只要是webpack创建的项目，在项目中的任何一个js文件里用这行代码都可以判断当前开发环境
vue2不同版本下如何分环境打包
剑雪封喉
10-18 1206
vue2不同版本下如何分环境打包
搭建一个vue2项目
SSophia的博客
03-24 6848
搭建vue2项目
vue-cli脚手架config目录下index.js配置文件的方法
10-18
例如，`prod.env.js` 定义生产环境的变量，而 `dev.env.js` 定义开发环境的变量。这些变量可以在项目中通过 `process.env` 访问，帮助区分不同环境下的配置。 2. **静态资源配置**： - `index`: 指定生成的 HTML ...
解决vue-cli3 使用子目录部署问题
10-18
首先，当我们在开发环境中使用 `vue-cli3 build` 命令时，通常会在 `vue.config.js` 文件中设置 `baseUrl`。默认情况下，Vue CLI 会生成应用的静态资源，这些资源的路径会基于 `baseUrl`。以下是一个基本的配置示例...
使用vue-cli打包过程中的步骤以及问题的解决
08-27
6. **处理API请求**：在生产环境中，如果项目依赖于API接口，需要确保API请求指向正确的生产环境地址，而不是开发环境的Mock Server。这可能需要在`axios`或`vue-resource`中设置基础URL。 7. **错误处理与日志**：...
vue-cli3.0配置demo更新
07-23
总结来说，Vue CLI 3.0 提供了一个高效且可自定义的开发环境。通过配置 `vue.config.js`，我们可以实现项目特定的需求，如设置别名、代理跨域，同时利用 `.env` 文件管理环境变量，确保项目在不同环境下稳定运行。...
Vue Cli3 创建项目的方法步骤
10-17
Vue CLI 3支持多环境配置，通常通过`process.env.NODE_ENV`来区分开发环境和生产环境。例如，你可以根据环境变量设置不同的API基础URL。 7. **Dll配置**： 对于大型项目，可以考虑使用Vue CLI的Dll配置来提高构建...
vue-cli2项目搭建和启动
D_bel的博客
07-30 1928
1. 首先安装node.js，安装过程就不介绍了。安装好后通过 node -v命令检查是否安装成功，出现版本号则表示安装成功 2.安装webpack，在cmd中执行npm install webpack -g命令全局安装，出现下图则表示安装成功 3. 接下来通过npm install -g vue-cli安装vue-cli，网上有说安装国内的淘宝镜像 npm install -g ...
Vue2.x-03使用vue-cli搭建Vue开发环境
小工匠
12-15 1万+
文章目录概述安装npm安装vue-cli建立工程npm i安装脚手架项目的基本支持包npm run dev运行由脚手架构建的基本 Vue.js 程序工程结构 概述 脚手架 vue-cli为我们省去了手工配置开发环境、运行环境和测试环境的步骤，可以让我们直接步入 Vue.js 开发，不过我们需要先搭建下环境，下面开始吧 安装npm npm（node package manager）node的包管理...
Vue前端项目搭建及测试
CJW的博客
07-04 836
本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目。以管理员身份打开命令行（CMD）输入如下命令，设置npm淘宝镜像加速： 安装vue脚手架vue-cli，在命令行（CMD）输入如下命令完成安装: 2.创建vue前端项目 以管理员身份在命令行（CMD）输入： 其中·xxx 为vue项目名，自行设置，之后按Enter回车；1.这里通过键盘上下键进行操作，选择最后一项：Manually select features后按Enter键确认；2.进行配置，通过键盘上下键进行操作，
vue-cli3/cli2 编译生产环境和测试环境
weixin_34199532的博客
01-11 2249
vue-cli3/cli2 编译生产环境和测试环境 思路 根据process.env(node环境信息).NODE_ENV(自定义变量/常用于区分生产环境和测试环境)的不同来改变Axios的baseURL,从而达到编译生产环境和测试环境 vue-cli3 1.根目录新建.env.[自定义名称NAME] 2.写入NODE_ENV = ‘[自定义名称NAME]’ 3.在入口文件main.ts判断pr...
Vue CLi 2.x 开发环境搭建
weixin_33875839的博客
02-28 778
Vue.js作为目前国内最火的前端开发框架之一，本文将介绍如何通过Vue-cli搭建Vue.js的前端开发框架。目前Vue-cli已经发展3.x，不过考虑很多开发依旧是在2.x框架上进行的，所以本文还是先介绍Vue-cli 2.x框架的搭建，之后会出3.x框架的搭建教程。1.安装Node JS首先需要在本机安装NodeJS，这是Vue开发的基础环境，Nodejs的官网：nodejs.org/en/...
vue配置开发，测试，生产环境api
weixin_34245749的博客
10-12 580
前言： 想实现通过不同的命令，打包调用不同环境的API，实现实现前端自动化部署。 前端自动化部署工程比较复杂，这里只介绍通过不同的命令，打包的时候调用不同环境的API，例如：npm run build 调用开发环境接口，打包开发环境npm run build:test 调用测试环境接口，打包测试环境npm run build:pr...
[配置]VUE中通过process.env判断开发，测试和生产环境，并分环境配置不同的URL HOST
热门推荐
tom_wong666
05-02 2万+
需求： VUE开发前端项目，需要分环境配置URL和做相关处理 思路：通过process.env做判断和处理 实现一：环境区分 1，找到项目配置文件夹： config文件夹 2，进入如下三个文件： dev.env.js 对应开发环境 test.env.js 对应测试环境 prod.env.js 对应生产环境 找到如下代码： // 开发环境 module.exports = merge(prodEn...
vue项目区分开发、测试、生产环境
weixin_41463944的博客
10-13 1742
vue项目区分开发、测试、生产环境
vue-cli-service开发环境怎么打包
最新发布
06-04
其中，vue-cli-service 是一个开发环境的命令行工具，可以通过它来构建、启动、调试和测试 Vue.js 应用程序。 要打包 Vue.js 应用程序，可以使用 vue-cli-service 提供的 build 命令，该命令会执行以下操作： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值