vue-cli3 webpack多生产环境配置。

最新推荐文章于 2024-07-15 14:35:33 发布
最新推荐文章于 2024-07-15 14:35:33 发布
阅读量567 收藏 1
点赞数
分类专栏： 笔记 文章标签： vue.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38323658/article/details/105809188
版权
本文介绍了在Vue CLI3项目中配置多生产环境的方法，包括在package.json中添加不同环境的build命令，创建.env配置文件以定义环境变量，以及如何根据这些变量调整baseUrl。通过这种方式，可以在同一服务器上为不同前端代码实现环境区分。
摘要由CSDN通过智能技术生成

首先，在实际项目中并不需要配置多环境的打包，因为通过服务器转发是更加安全的且不会出现跨域问题，不管是nginx，apache，还是docker，都是可以通过太后转发的。前端并不需要写死的地址去请求不同的环境，但是如果通一台服务器有多套前端代码需要转发，就需要通过关键字识别，然后nginx转发，具体通过下文。

## 项目初始化的时候通常只有两个版本development和production。如何再打包时区分环境分别打包呢？当然你可以用注释代码的方法，每次发布都要注释，解注，非常的麻烦。

接下来就介绍如何配置多个生产环境。快速打包

项目初始化的时候，通常默认会有两个版本，开发环境和生产环境
开发环境下：NODE_ENV=development(默认)
生产环境下：NODE_ENV=production(默认)

第一步配置package.json

初始化是这样的

"serve": "vue-cli-service serve",
"build": "vue-cli-s
最低0.47元/天 解锁文章
前端攻城师老张
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli3添加模式配置多环境变量的方法
12-09
vue-cli3配置多环境变量 先挂官网描述：环境变量和模式 需求 根据运行环境判断执行代码： 预发环境操作完成跳转地址与线上环境跳转地址不同 线上环境添加埋点脚本 实现 Step1：在项目根目录中新建.env.uat .env.uat配置如下： VUE_APP_BUILD_TYPE=uat vue-cli中规定，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。 代码中可以通过 process.env.VUE_APP_SECRET 这样访问。 NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用 Step
详解vue-cli + webpack 多页面实例应用
08-30
详解vue-cli + webpack 多页面实例应用 本篇文章主要介绍了使用vue-cli和webpack来构建多页面实例应用，解决了vue-cli主要用于构建单页应用的限制。通过对vue-cli的改造，可以快速搭建多页应用，并且具有良好的扩展...
vue-cli+webpack 多环境配置
有猿无分的博客
07-30 257
config文件下面的env-configJS /* 使用方法示例： 打包： 打包dev环境：npm run build --dev 打包test环境：npm run build --test 打包pro环境：npm run build --pro 本地运行： 本地运行dev环境：npm run dev --dev 本地运行test环境：npm run dev --test ...
vue-cli是什么？和 webpack是什么关系？
炑焽的博客
06-10 1262
Vue CLI是Vue.js项目的官方脚手架，基于Node.js与Webpack构建。安装Vue CLI前需确保Node.js已安装，随后通过npm全局安装。Vue CLI能迅速创建和管理Vue.js项目，提升开发效率。而Webpack则负责资源打包，通过配置文件管理依赖、插件等，优化代码并分割资源，提高项目性能。Vue CLI与Webpack的完美结合，让开发者更专注于业务逻辑，轻松构建高效、稳定的Vue.js应用。
vue-cli3 webpack build多个环境的方法
weixin_40461134的博客
07-30 573
首先在根目录下 创建 .env .env.development .env.production 在packjson创建 "build": "vue-cli-service build --mode production", "build:alpha": "vue-cli-service build --mode development", // 在.env.development 写入 NODE_ENV = "development" VUE_APP_URL = "alpha"
vue3前端架构---打包配置
qq_29579625的博客
01-20 1891
VUE前端架构中，打包配置优化是其中比较重要的一个步骤，vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载，进行打包配置优化。
vue-cli3 webpack配置多环境打包，解决浏览器缓存
Lotus的博客
06-16 630
问题1：当时遇到本地，测试服，线上不同的配置，然后一直改代码。就很坑。于是想到多环境打包。 问题2：每次上线后，都有以前的缓存，导致页面不能更新，都需要通知使用者强刷。但是这种方法使用感太差了。 【webpack打包文件加上版本号和时间戳】： const webpack = require('webpack'); const path = require('path'); const Timestamp = new Date().getTime(); module.exports = { p
vue-cli中的webpack配置详解
08-29
"vue-cli中的webpack配置详解" vue-cli中的webpack配置详解是基于Vue.js框架的项目中最重要的一部分。Vue-cli是一个基于Webpack的项目脚手架，提供了许多有用的功能和配置项，以帮助开发者快速构建和部署Vue.js应用...
windows下vue-cli及webpack搭建安装环境
08-30
本文将详细介绍如何在 Windows 下搭建 Vue-cli 及 Webpack 环境，并且详细讲解每一步的安装和配置过程。 一、安装 Node.js Node.js 是目前最流行的 JavaScript 运行时环境， Vue-cli 和 Webpack 都依赖于 Node.js ...
详解vue-cli之webpack3构建全面提速优化
08-28
在 Vue CLI 与 Webpack 3 的新环境中，我们可以关注以下几个关键点来提升构建速度： 1. **按需引用（On-Demand Import）**： - 对于引入的第三方组件库，如 Element UI、Vux 或 Iview，可以使用 babel-plugin-...
Vue 多环境的配置
个人学习使用
06-26 4776
首先 我们得了解 什么是多环境变量，以及多环境变量的作用，下面用一句简短的话来描述环境一般分为开发环境，测试环境，生产环境作用：文件创建的位置 根目录下 开发环境 配置生产环境来到控制台 启动命令吧 下面我将演示 启动开发环境的指令 其他环境类似为了方便测试 我们来到 main.ts 文件中 输出当前的环境 你们的可能是js 不影响大局.........
vue配置多环境
pscool的博客
06-02 793
启动开发环境，打印如下。
VUE项目使用.env配置多种环境以及如何加载环境
CVPR收割机的博客
04-19 4192
build:stage”: “vue-cli-service build --mode staging”，使用npm run build:stage指令时会在 staging 模式下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件，此时NODE_ENV 的值将被覆盖为 production，而不是 staging然后构建出生产环境应用。NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。
VUE配置多开发环境/静态配置文件修改地址
lranqi的博客
07-26 3550
在vue-cli中可以使用.env文件配置不同的开发环境，切换不同部署地址。NODE_ENV='production'VUE_APP_BASE_API='/api'.配置开发环境代理,为每一个接口地址加上的/api前缀，这里再通过配置开发环境代理设置代理地址并重写URL。devServer: {proxy:{}}使用window对象，通过外部配置文件显示修改请求。可以在 window 对象上存储数据或属性，并在整个页面中访问它们。
vue多环境配置方案
高先生的猫
08-13 1405
一般服务器分为本地环境，测试环境，正式环境，如果每次都要修改配置就很麻烦，总结一下我使用的方法 vue-demo/ |-build/ |-config/ |-dist/ |-src/ |-config/ |-index.js |-dev.conf.js |-sit.conf.js |-prod.conf.js |-package.json |-index.html 修改执行命令 修改pack
【VUE】10、VUE项目中多环境管理使用
最新发布
Asurplus
07-15 502
在 Vue 项目中，实现多环境管理（如开发环境、测试环境、生产环境）通常涉及到配置不同的环境变量和构建设置。Vue CLI 提供了一种简单而强大的方式来管理这些环境。
2024年Vue配置多环境变量,原来是这么回事啊，顺利通过阿里Web前端岗面试
wang688699的博客
05-11 549
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue相关配置文件详解及多环境配置大全
qq_46030057的博客
05-27 982
vue相关配置文件详解及多环境配置大全 ...
Vue 多环境变量的配置
努力
08-26 2190
为什么配置多环境变量呢？ 在我们开发的过程中，会有多个不同的访问环境比如：开发环境 、 生产环境 等等。在每一种环境下所需要访问的域名都是不一样的，所以可以通过配置多环境变量来解决这一问题。 一、在Vue中首先找到 package.json 文件 二、找到文件中的scripts添加新的配置 "scripts":{ "serve":"vue-cli-serviceserve--open", //npm run serve 启动项目 ......
使用vue-cli快速创建Webpack项目的步骤详解
使用Vue.js官方命令行工具`vue-cli`，可以快速地创建并启动一个包含热重载、静态检查等特性...这只是一个基础的配置，随着项目需求的增长，你还可以进一步定制Webpack配置，引入更多插件和工具，以满足复杂的开发需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值