vue项目自定义模式mode使用默认production模式的webpack配置(鱼目混珠版)

已于 2022-07-25 19:39:52 修改
阅读量714 收藏
点赞数
分类专栏： vue 文章标签： webpack vue.js 前端
于 2022-07-25 19:33:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43859458/article/details/125981776
版权

当项目需要分测试环境和正式环境不同配置时

如果需要使用vuecli默认production的webpack配置打包两种环境

1.新建两个不同的环境变量文件

在这里插入图片描述

2.然后再各自的文件中取配置不同的环境

注意：在文件中需要声明NODE_ENV=production才能使用同样的webpack配置

3.然后脚本命令里注明 –mode=test 获取–mode=prd就可以让webpack去查找对应后缀的环境配置为文件加载

在这里插入图片描述

最后就可以实现测试环境和正式环境webpack打包配置相同，环境变量不同

weixin_43859458
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用webpack搭建vue项目及注意事项
12-11
总结起来，手动配置Webpack搭建Vue项目虽然比使用预设的脚手架如vue-cli复杂，但能让我们深入理解构建流程，自由定制项目需求。掌握Webpack的配置技巧和插件使用，将有助于我们更高效地开发和优化前端项目，提升团队...
vue-cli3.0 环境变量与模式配置方法
10-17
- **Webpack 配置**：在 Webpack 配置中，可以直接使用 `process.env.XXX` 读取任何环境变量。 - **public/index.html**：可以使用模板语法插入环境变量，如 `<%= VUE_APP_BASE_URL %>` **模式配置** Vue CLI 3.0 ...
webpack
qq_43618136的博客
03-17 83
webpack 加载网页的各种资源速度太慢需要把资源合并打包，webpack是一个解决这种问题的项目构建工具。 安装 1.运行npm i webpack -g全局安装webpack ，这样就能在全局使用webpack的命令 或者2.在项目根目录中运行npm i webpack --save-dev安装到项目依赖中 基本使用 通常我们会在src源代码目录下新建main.js作为所有引用js文件的入口...
vue init webpack 卡住_Django+Vue前后端分离项目构建总结[Production/Develpment mode]
weixin_39912580的博客
11-29 107
引言最近打算做一个项目，建一个前后端分离的网页开发框架。琢磨来琢磨去，最后选了Django+Vue.js为什么这么选呢？Django嘛，可以快速开发安全和可维护的网站，并且免费且开源。三分钟就可以运行起来一个默认网页，对新手不要太友好。Vue.js是一套用于构建用户界面的渐进式框架。对前端开发者来说易于上手，且功能强大，代码清晰，另外结合支持类库可以为复杂的单页应用提供驱动。操作步骤：[1]配置D...
Webpack mode三种模式配置说明（production，development，none）
热门推荐
Czuaphe的博客
04-06 1万+
我们都知道webpack的配置文件 webpack.config.js 文件中 mode 表示webpack当前的环境以及对不同的环境的配置。虽然官方文档写明了三种不同的模块的配置，但是没有具体说明是什么意思，我就注释一下对应的模块到底进行了什么操作。 development（开发模式） 下面是从官方上得到的开发模式的全部配置， // webpack.development.config.js m...
webpack生产模式配置
jieyucx的博客
06-13 1908
生成模式（production mode）是指在开发完成后将代码部署到生产环境中运行的模式，通常需要进行代码压缩、优化、合并，以减少文件大小和请求次数，提高页面加载速度和运行效率。开发模式（development mode）则是指在开发过程中使用的模式，通常需要对代码进行调试、热更新等操作，以提高开发效率和代码质量。在开发模式下，通常不需要进行代码优化和压缩，可以保留源代码的完整性，以便于调试和排查问题。
webpack(4)之mode
qq_40677590的博客
06-17 1809
详细解读webpack配置之mode 众所周知，webpack主要的作用就是将项目当中的各种文件(.html、.css、.js、.json、.vue、图片......)全部进行整合打包，所以需要很多的依赖和处理方法，那么它的配置也将会有很多很多的东西....下面，我就将一些比较常用的列举出来，它们的用法以及配置... module.exports = { mode: '', entry: '', output: '', plugins: [], module: [], ...
vue网页的开发模式和生产模式
weixin_44943389的博客
08-06 1071
在开发模式下，Vue.js提供了丰富的开发工具和调试功能，方便开发者进行快速的前端开发和调试。在开发模式下，Vue.js会输出有关错误信息和警告的详细日志，帮助开发者定位问题和调试代码。开发模式下的构建文件通常较大，包含了额外的调试代码和开发工具。在生产模式下，Vue.js会对代码进行优化和压缩，去除调试和开发工具，以提高页面加载速度和性能。在开发阶段，开发者通常使用开发模式进行前端开发和调试，而在将网站或应用程序部署到生产环境时，则使用生产模式构建和发布。文件中配置构建脚本，以指定不同的构建模式。
详解基于Vue cli生成的Vue项目的webpack4升级
08-27
- 禁用所有默认设置，允许完全自定义配置 **三、优化配置（Optimization）** 1. **minimize** Webpack 4默认使用UglifyJsWebpackPlugin进行压缩，可通过设置 `optimization.minimize` 控制，如： ```javascript...
使用 webpack 从0开始搭建的 vue3+sass+element-plus+typescript 项目
最新发布
09-02
在本文中，我们将深入探讨如何使用Webpack从零开始搭建一个基于Vue3、Sass、Element-Plus和TypeScript的项目。Webpack是一个强大的模块打包工具，它能够处理JavaScript、CSS和其他资源，将它们打包成优化过的单一...
vue-cli3.0开启production环境下的服务
weixin_46513664的博客
04-19 1062
npxvue-cli-serviceserve--modeproduction
webpack 基础配置指南
叽歪小Q的博客
03-30 958
前言 基础的配置可以分为以下几个方面： entry 、 output 、 mode 、 resolve 、 module 、 optimization 、 plugin 、 source map 、 performance 等 webpack 五个核心概念 Entry：指示以哪个入口起点开始打包，分析构建内部依赖图。 Output：输出打包后的资源 bundles 输出到哪里去 Loader：处理非 js 文件（webpack 本身只理解 js） Plugins：插件范围更广的任务。打包优化、压缩、重新定
vue-cli中配置生产模式
weixin_53688947的博客
09-18 602
一 .创建env.production 文件 并写入 ​ MODE_ENV="production" VUE_APP_CURRENTMODE="production" outputDir="dist" 二. 在vue.config.js中添加一下代码即可 module.exports={ publicPath: './', outputDir:process.env.outputDir } 三.在package.json 中scripts中添加 "prv": "vue-cli-servi
webpack --env.production和--mode =“ production”有什么区别
九段刀客的博客
10-04 3057
在webpack.config.js中判断环境的时候要使用函数的方式导出， "scripts": { "serve": "webpack-dev-server --mode development --progress --open", "build": "webpack --env.production --mode production --progress" }, module.exports = function (env, argv) { console.log(env, argv)
vue项目搭建
weixin_41938739的博客
04-14 250
Vue 项目搭建 环境配置 nodejs 安装（推荐 v10 以上） npm 是什么？ npm 常用命令 package.json 文件配置说明 设置淘宝镜像： 使用yarn包管理器 yarn 常用命令 用 vue cli 自动搭建项目 npm install -g @vue/cli 手动搭建项目 创建目录并进入： mkdir project && cd project 初始化项目 用npm init 初始化项目： 过程中会让你填写项目名、版本、描述、仓库地址、关键字等信息，执行完毕后会在
webpack4.0解决报错The ‘mode‘ option has not been set, webpack will fallback to ‘production‘ for，Module..
m0_53206841的博客
04-21 3143
webpack报错The 'mode' option has not been set, webpack will fallback to 'production' for，Module not found: Error: Can't resolve，WARNING in configurationwebpack，webpack4.0，webpack报错，webpack生产模式，webpack开发模式
Vue-Element-Admin下载启动
流响出疏桐
04-07 857
一.目录尽量避免特殊字符 文件夹名称不能有 & WWW\ES6&Vue\vue-element-admin> npm run dev WWW\ES6-Vue\vue-element-admin> npm run dev 二. 官网安装 #拷贝项目 git clone https://github.com/PanJiaChen/vue-element-admin.git #拷贝完成后进入所在项目目录 cd vue-element-admin #设置npm镜像为国内地址，并且进
关于vue的webpack中开发模式和生产模式的基本配置
nulinuligengnuli的博客
09-08 620
vue中的webpack简单配置
vue环境变量
weixin_42666092的博客
06-11 5118
1.mode 模式 设置后， --mode production,是在打包后生成的文件中启动触发， --mode development 是在开发环境下启动触发触发 模式设置，在package.json 的 scripts属性中设置的命令 development(开发环境) 模式用于 vue-cli-service serve test(测试) 模式用于 vue-cli-service test:unit production(生产环境) 模式用于 vue-cli-service build 和 vu
使用webpack打包vue项目怎样配置
04-18
webpack? 首先，在项目根目录下安装 webpack 和 webpack-cli： npm install webpack webpack-cli --save-dev 然后，在项目根目录下... "build": "webpack --mode production" } 运行 npm run build 即可进行打包。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值