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

最新推荐文章于 2024-08-23 10:24:42 发布
最新推荐文章于 2024-08-23 10:24:42 发布
阅读量4.9k 收藏 14
点赞数 3
分类专栏： 前端 文章标签： vue 编译环境 动态url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_15389075/article/details/94439511
版权

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改变

主要是因为公司部署环境打包之后资源文件会多个idc-client的绝对路径（在第二步

最低0.47元/天 解锁文章
小鸭子--
关注
专栏目录
Vue本地开发环境配置及上线部署
weixin_52485890的博客
07-21 2741
Vue本地开发环境配置及上线部署
Vue项目运用webpack多环境配置的问题和本地开发跨域问题
christyleylh的博客
05-15 1172
实际运用场景 在我们开发前端应用中，往往需要使用多个环境，例如 1.本地开发环境 2.测试环境 3.正式环境 所以每个环境都需要对相应的服务器地址、环境专属变量等做出单独的配置。 Vue项目 1.初始化 我们使用vue-cli init生成的项目，调试与打包已经为我们在package.json中做好了。 /* /package.json */ "scripts": { ...
vue 配置不同打包环境（分享）
weixin_60547084的博客
03-23 1404
标注：需要通过 --mode 去匹配对应的环境文件，而开发环境不需要配置。测试环境不会生成 css 文件，而是每个组件生成对应的 js 文件。
在vue中配置开发环境，测试环境，生产环境
最新发布
yodoyskts的博客
08-23 519
前言：开发过程、测试过程、生产过程使用的接口地址不能，还有执行的操作可能也不一样，也就需要实现配置好开发环境、测试环境、生产环境，需要什么环境下的配置直接使用即可。现在就算配置好啦，在打包的时候npm run build就是打包生产的;npm run test就是打包测试的。我在写这篇文章的时候图片取自不同项目，变量名可根据自己的情况来定，如果有解决不了的问题可以在评论区留言讨论。
vue 配置生产环境 开发环境
郑州彭于晏
08-06 597
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】vue根据不同环境(正式、测试)打包（一）
老程
12-09 5082
前言 前提姿势 下面有个东西必须得你看文章的问懂得。
vue-cli2：区分开发、测试、生产环境
阵雨的博客
08-15 2739
本文适合使用vue-cli2搭建的项目，vue-cli3取消了build和config文件夹，不适用此方法。 3请移步https://blog.csdn.net/yuyuking/article/details/100323068 用vue-cli2构建完项目后，只有一个开发环境dev和生产环境prod，现在我们要加一个测试环境 test 1、首先在package.json增加一个test...
解决vue中使用proxy配置不同端口和ip接口问题
10-16
为了使不同模块请求不同IP和端口的接口变得可配置，我们可以将这些可变的接口信息存储在公共目录下。通过引入一个js文件或json文件来存储接口地址，然后在前端代码中动态读取这些配置信息。 ```javascript window....
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
vue 打包 根据命令的不同 打包不同的环境
h5433的博客
07-20 738
第一步 复制prod.env.js 为prod.test.js 第二部 修改webpack.prod.conf.js文件的判断 第三步 在打包的时候加上 npm run build testing
vue项目分环境打包配置不同命令
06-26
vue实现分环境打包，给不同的环境配置相对应的打包命令，添加功能版，带有之前的基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子
vue配置打包命令，根据不同开发环境打包成不同的文件夹（默认打包文件为dist）
qq_41147046的博客
09-06 1613
4、在vue.config.js文件中配置根据环境变量打包时的文件名称，默认为dist。1、根据系统使用参数，新增环境变量配置参数以production环境为例。2、创建.env.production文件，并对当前环境系统参数进行配置。3、在package.json文件中配置打包命令。
vue中配置生产环境和开发环境
weixin_42679876的博客
03-18 1207
在根目录下新建.env.test（测试环境）、env.development（开发环境）、.env.production文件（生产环境） 三个配置文件的配置内容如下： .env.test（测试环境）配置内容 NODE_ENV = 'production'//用来表示是生产环境还是开发环境 VUE_APP_MODE = 'test'//用来表示是生产环境还是测试环境 VUE_APP_BASE_URL = http://ai.galaxyspaceai.com:18001/knowledge-graph.
【VUE】VUE 分环境打包(开发/测试/生产)配置
LuviaWu的博客
12-20 971
做个打包笔记，工作比较忙粗糙些，文案相似，方式不同 最近要把Vue项目部署到服务器上，在测试好的项目中执行npm run build就开始打包了。但是每次只能打包到一个环境，不同环境需要配置不同的地址，还得手动更改接口的地址，这给部署带来了极大的不方便。 下面，我们要自己配置命令来实现分环境打包，项目结构如下： 1.在config目录内新建test.env.js文件(要保证和prod.env.j...
vue分别打包测试环境和正式环境
JessicaLi的博客
04-23 4788
vue打包时使用不同的环境变量 需求 同一个项目通过打包使用不同的环境变量，目前的环境有三个： 一、本地------开发环境 二、线上------测试环境 三、线上------正式环境 我们都知道vue默认的打包都是生产模式，所以说打包后的都是线上的东西，现在我们解决一下如何通过不同命令的打包方式使用不同的环境变量。 安装cross-env npm install cross-env ...
vue-cli 2.x 多环境打包配置，根据打包命令生成不同的打包文件名
weixin_43869982的博客
03-15 1283
1.配置package.json "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", "li
vue配置多个运行环境、打包环境，通过运行指令切换环境，通过切换环境控制对应环境的参数
mrliucx的博客
04-29 7315
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给不同的环境配置不同的打包命令
幸遇三杯酒好，况逢一朵花新
05-01 1046
  今天小咸儿接着来给大家分享有关Vue的内容了：   此模式仅适合于包含build和config配置文件 第一步：安装cross-env npm install --save-dev cross-env 第二步：修改各环境下的参数 'use strict' module.exports = { NODE_ENV: '"production"', EVN_CONFIG: '"pr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值