vue 不同环境打包

最新推荐文章于 2024-07-10 15:04:24 发布
最新推荐文章于 2024-07-10 15:04:24 发布
阅读量2k 收藏 2
点赞数
分类专栏： # vue 文章标签： vue vue分环境打包 vue打包 vue运行打包互不干扰
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37948170/article/details/81204585
版权
本文介绍了Vue项目在完成开发后如何针对sit和prod环境进行打包。通过安装cross-env，修改package.json添加打包命令，配置config文件，调整index.js、util.js、webpack配置文件以及build.js，实现不同环境的打包并确保npm run dev在本地正常运行。项目结构清晰，打包后js路径正确。
摘要由CSDN通过智能技术生成
  • vue开发完成之后就要分不同环境打包测试，本文即打包sit，prod环境，并在本地可以正常运行npm run dev 的解决方案
  • 安装cross-env，cnpm install cross-env,在你项目根目录下执行
    这里写图片描述
  • 在package.json增加打包命令
    这里写图片描述
    • 在config下增加对应的配置文件，原来的prod配置文件也要加上 ENV_CONFIG:‘“prod”’,项。
  • 这里写图片描述
    • 修改index.js,引入配置文件，assetsPublicPath配置为你在tomcat下建立的要访问的目录名。例如 myproject
      这里写图片描述
      这里写图片描述
    • 修改util.js ,增加访问路径的相对地
最低0.47元/天 解锁文章
Slient-猿
关注
专栏目录
详解vue.js根据不同环境(正式、测试)打包到不同目录
10-18
为了有效地管理这些环境，Vue提供了一种打包到不同目录的策略，以确保测试和正式环境的文件互相不影响，同时便于管理。 ### Vue.js环境区分打包的策略： #### 1. 环境变量配置 在Vue项目中，环境变量的配置是区分...
线上打包和本地打包的区别
qq_41912406的博客
05-23 3487
本地打的包对依赖的jar包是从本地仓库中取，所以如果多模块项目中自己写的被依赖的模块要保证私服中始终是最新的代码，及时安装到本地。线上使用jenkins打的包是从私服上拉代码，所以要保证本地修改在打包前一定要提交到私服上。jenkins打的包和本地不一样是，考虑以下方面,看看服务器时间是否不一样，或者在jenkins的代码拉取是加上@head。 ...
vue 项目前端部署以及windows ,linux 端部署遇到的问题
大脸猫~
09-13 9330
Vue项目打包之后，部署有两种方式，一是前台打包后扔给后台，放置在后台项目的根目录下就可以了。这种是最简单的。还有一种方式就是前端单独部署，这里讲的是后者 前端如何单独部署呢？ 一个最简单的办法就是使用Nginx部署辣 一.我们将自己的Vue项目打包 运行npm run build 会在项目中生成一个叫dist文件 二.安装Nginx Nginx是一个类似于Tomcat的服务器，部署前...
vue打包成linux可执行程序（windows、mac可执行程序）
weixin_52213331的博客
11-14 2247
vue打包成linux可执行程序（windows、mac可执行程序）
vue针对正式和测试环境打不同的包
yemuxia_sinian的博客
03-26 1105
一开始我是直接在pro.env.js里面配置了两个地址，每次打包时注释掉不要的就好了，但打包频繁了，越发觉得很不方便，然后就有了后面的方法。 一、模仿npm run build，新建一个新的命令：npm run sit 通过新建命令：npm run sit 来打包测试环境包，npm run build专门来打包正式包就可以了 1、复制一份config/文件夹下的pro.env.js，改名si...
不同vue版本下如何分环境打包
weixin_40943147的博客
04-13 1777
前言 假如你的Vue项目需要在多个服务器部署，若使用代理的模式，每个环境都需要先改IP地址及端口，再打包，非常的麻烦 vue2版本（基于webpack）的动态ip及端口分环境打包 在public目录下，新建config.js文件 在config.js文件中编写对应的分别打包环境 把config.js在index.html中引入 创建对应的 .env.dev ， .env.sit ， .env.prod 三个环境 在每个环境中写入对应的环境变量 处理package.json中的sc
vue项目分环境打包配置不同命令
06-26
vue实现分环境打包，给不同的环境配置相对应的打包命令，添加功能版，带有之前的基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子
Vue项目分环境打包的实现步骤
08-27
Vue项目的分环境打包是开发过程中不可或缺的一环，它允许我们根据不同的部署环境（如开发、测试、预发布和生产）创建针对性的构建。Vue CLI工具虽然默认提供了开发（dev）和生产（prod）两种环境，但往往需要针对更...
vue项目打包在Linux系统报错
weixin_48258311的博客
03-12 841
之前在Windows系统下打包的vue项目一切正常，后来在Linux系统下打包就报错，显示找不到文件，后来发现是在路由引入的过程中大小写和文件名不一样，比如文件名是index,但是在使用的过程中写成了Index，这种情况在windows 环境下是没有问题的，但是Linux环境下，大小写敏感，就会报错。
【前端】VUE多环境配置
我是Superman丶的博客
04-06 460
【前端】VUE多环境配置。
vue项目在window编译打包没问题linux编译打包报错
最新发布
u010029821的博客
07-10 548
从报错信息就能看出是找不到引用的文件，于是找到对应的文件查看，发现是大小写问题不一致导致的。：修改代码，引用的文件必须是区分大小写，同时约束好程序员的代码规范。electTag.vue，而实际代码是写着。linux区分大小写，window不区分。
Vue项目打包常见问题小结
lifefriend_007的博客
12-27 859
Vue 项目在开发时运行正常，打包发布后却出现各种报错，这里整理一下遇到的问题，以备忘。 1、js 路径问题 脚手架默认打包的路径为绝对路径，改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath，把原来 ‘/’ 改为 ‘./’ build: { assetsPublicPath: './' } 2、img 路径问题 在 build/...
vue项目分环境配置打包处理
总结前端开发中遇到的问题，分享前端知识
11-26 1349
vue项目分环境配置打包处理主要包括几方面：本地环境配置；生产环境配置；打包处理；打包配置处理（扩展）
Vue多环境配置
小强崽的博客
07-17 1807
一、新建配置 # 开发环境 .env.dev # 集成测试 .env.sit # 验收测试 .env.uat # 生产环境 .env.prod .env.dev ENV = 'dev' VUE_APP_SERVER_API = 'http://localhost:8080/api/pavilion' .env.sit ENV = 'sit' VUE_APP_SERVER_API = 'http://192.168.8.246:8080/api/pavilion' .env.uat ENV = '
vue项目配置不同环境打包指令（vue-cli2、vue-cli3项目）
xilejie的博客
04-11 4466
根据指令打包不同环境的dist包。
vue实现分环境打包
eqizhihui的博客
08-22 213
创建环境变量的文件，若自定义文件名，则若想配置文件生效，就需要在package.json文件修改，若不想修改package.json文件，则开发环境需要严格命名为.env.development，生产环境严格命名为.env.production，就会覆盖默认情况的配置。测试，配置有环境变量的情况下，会将新配置的和默认配置的合并在一起。
Vite多环境配置与打包：灵活高效的Vue开发工作流
interest_ing_的博客
04-15 4052
Vite作为一个新兴的前端构建工具，提供了快速的冷启动、即时模块热更新以及真正的按需编译，极大地提高了Vue开发效率。本文将向你展示如何在Vite中设置多环境开发和打包，包括如何配置环境变量、如何应用这些变量以及如何根据不同的环境进行项目的构建。通过这些步骤，你可以确保在开发、测试和生产等不同阶段中，你的应用都能以最佳状态运行。无论你是Vite的新手还是希望优化现有工作流的开发者，本文都将为你提供实用的指导和建议。
Vue项目配置多环境打包命令详解
本文主要介绍了如何在Vue项目中配置不同环境的打包命令，包括正式环境、测试环境和开发环境。通过以下步骤实现环境配置的差异： 1. 安装cross-env： 在Vue项目中，为了能够在不同环境中切换NODE_ENV变量，我们需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值