vue 打包根据命令的不同打包不同的环境

最新推荐文章于 2024-03-01 17:21:46 发布

原创最新推荐文章于 2024-03-01 17:21:46 发布 · 772 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue打包

vue 学习记录专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个简单的步骤来创建和配置一个用于自动化测试的环境。主要包括：复制prod.env.js文件为prod.test.js并设置NODE_ENV和is_weixin变量；修改webpack.prod.conf.js文件中的环境变量加载逻辑；最后通过npm run test命令进行测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步复制prod.env.js 为prod.test.js

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  is_weixin: ' "1" '
}

第二部修改webpack.prod.conf.js文件的判断
process.env.npm_lifecycle_script.split("--")[1]

const env = process.env.npm_lifecycle_script.split("--")[1] === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')

第三步在打包的时候加上
在这里插入图片描述

"test": "node build/build.js --testing",

运行 npm run test

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

h5433

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue 分环境打包配置不同的,,配置正式生产环境、线上测试环境和开发环境IP请求

小鸭子的博客

07-02

5011

1、在config下面配置test.env.js 、pro.env.js、dev.env.js 这里面的配置得用双引号包着，不然会报错，打包不通过的 2、config中的index.js 文件中build.修改： 3、在build中webpack.prod.conf.js做如下修改 4、在 build下面的webpack.base.conf.js改变主要是因为公司部...

【vue】vue根据不同环境(正式、测试)打包（一）

老程

12-09

5122

前言前提姿势下面有个东西必须得你看文章的问懂得。

参与评论您还未登录，请先登录后发表或查看评论

vue配置打包命令，根据不同开发环境打包成不同的文件夹（默认打包文件为dist）

qq_41147046的博客

09-06

1792

4、在vue.config.js文件中配置根据环境变量打包时的文件名称，默认为dist。1、根据系统使用参数，新增环境变量配置参数以production环境为例。2、创建.env.production文件，并对当前环境系统参数进行配置。3、在package.json文件中配置打包命令。

VUE 根据不同命令打出不同环境的包

z772330927的博客

04-21

437

VUE 根据不同命令打出不同环境的包第一步配置全局变量第二步配置package.json来启动不同的命令第三步引用第一步配置全局变量在项目根目录创建配置文件：.env.test 在.env文件中定义变量需要以 VUE_APP_ 作为前缀，最好都是大写。根据不同的需求定义多个变量 NODE_ENV = 'production' VUE_APP_API = "" VUE_APP_TYPE = "" 第二步配置package.json来启动不同的命令 "scripts": { "dev":

vue项目分环境打包配置不同命令

06-26

vue实现分环境打包，给不同的环境配置相对应的打包命令，添加功能版，带有之前的基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子

详解vue 不同环境配置不同的打包命令

10-17

在Vue项目开发中，通常会根据不同环境（如开发环境、测试环境、生产环境）来配置不同的构建命令，以满足不同阶段的打包需求。本文将详细讲解如何配置Vue项目以实现这一目标。首先，我们需要在项目中安装一个名为...

详解vue.js根据不同环境(正式、测试)打包到不同目录

12-09

以下是根据标题和描述详细解释如何在Vue.js项目中实现根据不同环境打包到不同目录的方法： 1. **创建环境变量**：在`build`文件夹下创建一个名为`testing.js`的新文件，用于配置测试环境的变量。在文件中，我们...

配置vue不同环境配置不同打包命令

Genius_cxx

09-04

761

不同环境如何配置地址请查看环境切换 1：安装cross-env npm i --save-dev cross-env //npm i --save-dev cross-env //淘宝镜像下载 2：安装cross-env 在config目录下创建test.env.js和pre.env.js 修改prod.env.js中的内容，如下 'use strict' module.exports =...

vite打包构建时环境变量（env）生成可配置的js文件

最新发布

胡萝卜先生的进阶之路

03-01

5374

在vite开发过程中，一些变量可以放在.env（基础公共部分变量）.env.dev（开发环境）、.env.production（生产环境）中管理，通常分成开发和生产两个不同的配置文件管理；但是在部署调试的过程中会有不同的若干个环境运行，这时候需要修改.env.production中的部分变量（如api地址）重新打包会比较麻烦；

vue通过打包配置区分环境

weixin_43827751的博客

12-26

639

用于正式环境的配置。然后可以在这些文件中指定不同的环境变量，在代码中通过。在Vue中，通常会使用环境变量来区分打包测试环境和正式环境。这样可以在代码中根据环境变量来区分不同的环境，比如在Vue的。通过这种方式，你就可以区分打包测试环境和正式环境了。文件来管理环境变量，你可以在项目根目录下创建不同的。文件来分别指定测试环境和正式环境的配置。参数来指定使用哪个环境配置。用于测试环境的配置，创建。表示使用测试环境配置，表示使用正式环境配置。

vue 自定义命令控制打包运行切换环境。

举案齐眉意难平

02-22

1792

如何自定义vue 打包，运行的npm 指令

vue:不同环境配置不同打包命令

sunshine的博客

04-18

9199

通过vue-cli中的npm run build 打包，这个只能打包到一个环境，在实际工作中可能有生产环境，预发布环境甚至更多，每个环境的接口地址都不同，每次都需要手动修改接口地址，非常繁琐。那我们怎么才能做到执行不同的命令打不同的包呢？下面是我在实际工作中的一个解决方案： 1.npm install cross-env –save-dev 2.在package.json的scripts标签下...

vue不同环境配置不同打包命令

weixin_34221773的博客

08-18

1123

2019独角兽企业重金招聘Python工程师标准>>> ...

vue cli3根据不同指令打包不同环境的包

weixin_44594219的博客

05-30

1888

介绍了vue cli3如何根据不同打包指令打包不同环境的包，以及易踩到的坑

vue配置多个运行环境、打包环境，通过运行指令切换环境，通过切换环境控制对应环境的参数

mrliucx的博客

04-29

8680

01.配置环境 1.创建开发环境、测试环境、生产环境文件 2.给文件配置接口基础API，添加对应环境的所需参数，以生产环境为例 02.静态参数值跟随环境变化 1.环境配置文件中添加了两个参数（代理、websocket） #开发环境nginx代理路径 VUE_APP_BASE_URL = 'manage-web-dev' #开发环境websocket VUE_APP_WEBSOCKET = '192.168.xx.xx:8080' 2.添加的环境参数为VUE_APP_BASE_URL、VUE_APP_

vue 项目打包，根据不同命令，配置不同环境，请求不同接口地址

yiyueqinghui的博客

02-18

2046

实现效果：给测试环境打包时，采用A接口地址；给生产环境打包时，采用B接口地址；实现原理 process.argv获取当前运行的node命令，再根据不同命令，获取不同环境下的相应配置；实现步骤 1、修改package.json，新增测试环境的打包命令 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run d

vue-cli3通过不同命令打包文件到不同文件夹并配置不同请求地址（开发环境、UAT环境、生产环境）

weixin_45298700的博客

08-14

1962

一、区分不同环境 1.在根目录下新建3个文件（.env.development、.env.production、.env.uat）文件类型为.txt文件 .env.development VUE_APP_BASE_API=开发环境地址 VUE_APP_ENV=development .env.production NODE_ENV=production VUE_APP_BASE_API=生产环境地址 VUE_APP_ENV=production .env.uat NODE_ENV=production

vue 不同环境打包指令的配置（vue-cli2、vue-cli3）

weixin_43299180的博客

03-04

2733

针对前后端完全分离项目，为不同环境配置不同的打包指令是非常必要的。vue-cli2 和 vue-cli3 的配置有所不同，下面分别介绍一下。一、vue-cli2 详细步骤： 1、安装 cross-env，它可以处理 windows 和其他 Unix 系统在设置环境变量的写法上不一致的问题。 npm i --save-dev cross-env 2、配置不同环境下的文件和参数，在 config 目录下创建test.env.js、prod.env.js、dev.env.js 文件（如果已经有了就直接下面操

vue cli 3.0通用打包配置，不分一二级目录

iceking

05-25

2400

1.项目根目录下新建vue.config.js，进行如下配置即可 module.exports={ publicPath:'', };

Vue项目环境区分打包及命令配置详解

在现代前端开发中，使用Vue.js框架构建项目时，常常需要根据不同环境（如开发、测试和生产环境）来打包应用。为了实现这一目标，开发者需要配置不同的构建命令来满足不同环境下的特定需求。本文将详细介绍如何在Vue...

vue 打包 根据命令的不同 打包不同的环境

vue 打包根据命令的不同打包不同的环境