vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)

简介: 本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。

vue-cli区分办法

vue配置生产环境.env.production、测试环境.env.development

vue配置webpack生产环境、测试环境

在使用webpack创建完vue2项目的时候,为了解决生产打包、测试打包对应的全局变量不一致的问题。

首先看一下package.json的改动:

  "scripts": {
   
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:dev": "cross-env ENV_NUM=0 node build/build.js",
    "build:pro": "cross-env ENV_NUM=1 node build/build.js"
  },

针对我这里,我增加了两个打包变量

build:dev对应的是测试版本的打包
build:pro对应的是生产版本的打包

运行的命令分别是

npm run build:dev

npm run build:pro

cross-env是什么?

运行 npm run build:dev就会将ENV-NUM的值传给process.env,在项目中就可以通过process.env.ENV_NUM 拿到值,为 ’0‘;
但是webpack 的NPM.script 传参写法在不同系统上兼容不一样,有可能会导致系统卡死。(我是用mac的,我的同事全是用windows,说不定给甲方的代码也会有用lunix的大神,当然如果是用服务器打包,那是lunix多)

用cross-env插件来处理这个问题:

安装 npm i cross-env --save

npm i cross-env --save

看下目录结构:
在这里插入图片描述
dev.env.js只有在本地开发的时候会用到,用在webpack.dev.conf.js;
prod.env.js会在打包之后用到,无论是测试环境还是生产环境,用在webpack.prod.conf.js中。

新建prodReal.env.js文件,和prod.env.js同级:
在这里插入图片描述

'use strict'
// 这个环境为线上真实环境
module.exports = {
   
  NODE_ENV: '"production"',
  // ENV_NUM 没有实际作用 只是做标识
  ENV_NUM: '"1"',
  VUE_APP_URL: '"http://xxxxxxxxx"',
}

这个时候我们去webpack.prod.conf.js文件中:
在这里插入图片描述

const prodenv = require('../config/prod.env')
const prodRealenv = require('../config/prodReal.env')

在下面plugins做更改:
在这里插入图片描述
判断在package.json传入的变量,也就能知道他执行的是build:dev还是build:pro了,然后使用响应的配置。

    new webpack.DefinePlugin({
   
      // 0 本地开发/测试环境  1为 生产环境
      'process.env': process.env.ENV_NUM === '0' ? prodenv : prodRealenv
    }),

到这个时候就已经完活了。

看一下本地开发环境的配置:
在这里插入图片描述
线上测试环境的配置:
在这里插入图片描述
线上生产环境的配置:
在这里插入图片描述

验证

到目前为止就完全完活了,下面测试下
将dev.env.js的url换成:我是本地环境
将prod.env.js的url换成:我是线上测试环境
将prodReal.env.js的url换成:我是线上生产环境

在根组件里面增加一行打印:

  mounted() {
   
    // 备用打印
    console.log("===================", 'process.env.VUE_APP_URL')
    console.log(process.env, 'process.env.VUE_APP_URL')
  },

1.本地运行打印:

npm run dev

在这里插入图片描述
2.线上测试环境运行,首先打包:

npm run build:dev

打包后cmd进入dist文件夹中,执行http-server命令,启动一下项目:
http-server命令报错的话:

npm i -g http-server

在这里插入图片描述

3.线上生产环境运行,首先打包:

npm run build:pro

打包后cmd进入dist文件夹中,执行http-server命令,启动一下项目:
http-server命令报错的话:

npm i -g http-server

在这里插入图片描述

测试成功!

学习参考:修改vue-cli2的webpack环境,增加一个数据模拟dev及多个不同的build地址

目录
相关文章
|
23小时前
|
网络协议 关系型数据库 应用服务中间件
【项目场景】请求数据时测试环境比生产环境多花了1秒是怎么回事?
这是一位粉丝(谢同学)给V哥的留言,描述了他在优化系统查询时遇到的问题:测试环境优化达标,但生产环境响应时间多出1秒。通过抓包分析,发现MySQL请求和响应之间存在500毫秒的延迟,怀疑是网络传输开销。V哥给出了以下优化建议:
|
6天前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
14 1
|
29天前
|
分布式计算 Hadoop Shell
Hadoop-35 HBase 集群配置和启动 3节点云服务器 集群效果测试 Shell测试
Hadoop-35 HBase 集群配置和启动 3节点云服务器 集群效果测试 Shell测试
65 4
|
28天前
|
运维 监控 数据可视化
大数据-171 Elasticsearch ES-Head 与 Kibana 配置 使用 测试
大数据-171 Elasticsearch ES-Head 与 Kibana 配置 使用 测试
52 1
|
30天前
|
存储 数据采集 分布式计算
Hadoop-17 Flume 介绍与环境配置 实机云服务器测试 分布式日志信息收集 海量数据 实时采集引擎 Source Channel Sink 串行复制负载均衡
Hadoop-17 Flume 介绍与环境配置 实机云服务器测试 分布式日志信息收集 海量数据 实时采集引擎 Source Channel Sink 串行复制负载均衡
41 1
|
1月前
|
前端开发 测试技术 程序员
在工作中会涉及到的几个环境(概念补充) 办公环境、开发环境、测试环境、线下环境、线上环境/生产环境都是什么,他们之间的关系?
本文解释了在职场中可能会接触到的不同环境,包括办公环境、开发环境、测试环境和生产环境(线上环境),以及它们之间的关系和重要性。
56 1
|
1月前
|
JavaScript
vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
29 3
|
25天前
|
监控 Java Maven
springboot学习二:springboot 初创建 web 项目、修改banner、热部署插件、切换运行环境、springboot参数配置,打包项目并测试成功
这篇文章介绍了如何快速创建Spring Boot项目,包括项目的初始化、结构、打包部署、修改启动Banner、热部署、环境切换和参数配置等基础操作。
99 0
|
24天前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
45 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
2月前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
205 7
Jmeter实现WebSocket协议的接口测试方法