vue 不同环境打包

最新推荐文章于 2025-08-08 16:21:57 发布
原创 最新推荐文章于 2025-08-08 16:21:57 发布 · 2.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue分环境打包 #vue打包 #vue运行打包互不干扰

本文介绍了Vue项目在完成开发后如何针对sit和prod环境进行打包。通过安装cross-env，修改package.json添加打包命令，配置config文件，调整index.js、util.js、webpack配置文件以及build.js，实现不同环境的打包并确保npm run dev在本地正常运行。项目结构清晰，打包后js路径正确。
  • 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 ,增加访问路径的相对地址。多个环境，因此assetsSubDirectory的值做一个多次判断最后赋值。
最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue环境安装、项目构建运行、打包部署详解
adminwxc的博客
02-27 2514
官网下载.msi格式安装包，，此处由于是64位计算机，所以选择如下。
vue项目打包之开发环境和部署环境的实现
11-21
项目开发阶段和生产环境可能不一样 如前端在开发阶段，接口可能是自己使用 node.js 搭建的服务器，API 返回的也都是假数据，等后台接口开发好后，再切换成后台提供的接口，等测试没有问题，服务端上线后，又要改成正式的接口 手动改动接口，既繁琐又容易出错（当然，区别还不止这些） 优雅的解决方案是，分别使用两个入口文件，一个用于开发环境打包，一个用于生产环境打包 具体来说，分为下面几个步骤 1、创建入口文件 在 src 目录下新建 prod_env.js 和 dev.env.js 将main.js 中代码分别拷贝到这两个文件中，并删除 main.js 2、配置打包时的入口文件 项目根目录下新建
vue项目在window编译打包没问题linux编译打包报错
u010029821的博客
07-10 932
从报错信息就能看出是找不到引用的文件，于是找到对应的文件查看，发现是大小写问题不一致导致的。：修改代码，引用的文件必须是区分大小写，同时约束好程序员的代码规范。electTag.vue，而实际代码是写着。linux区分大小写，window不区分。
VUE项目指定配置文件启动及打包
最新发布
tongxin_tongmeng的博客
08-08 432
本文介绍了一种多环境配置管理方案，通过为本地开发、客户测试和生产环境分别创建.env.dev、.env.test和.env.prod配置文件，解决项目在不同环境切换时频繁修改配置的问题。在package.json中配置了对应的serve和build命令，如"serve:dev"、"build:prod"等，通过--mode参数指定环境。项目代码中通过process.env动态获取配置变量，实现环境隔离。该方案避免了手动修改配置的繁琐，降低了出错风险，同时保持了代码的统
Vue自定义环境变量打包运行
liulyly的博客
05-17 310
这个只是当前项目按照不同命令实现一种有登录页，一种携带token无需登录，记录一下实现方式。
vue之打包配置环境
阿狸演绎的博客
10-19 1089
在packjson.js里使用 —mode 重新定义打包的配置文件保证evn.xxxh 这个一定要和packjson.js 里的 --mode xxxh 对应上而serve:xxxh 一定要和运行命令的 npm run serve:xxxh 对上使用如下.evn.xxxhpackjson里"serve": "vue-cli-service serve", // 默认调用 env.dev。
vue 配置不同打包环境（分享）
weixin_60547084的博客
03-23 1585
标注：需要通过 --mode 去匹配对应的环境文件，而开发环境不需要配置。测试环境不会生成 css 文件，而是每个组件生成对应的 js 文件。
详解vue.js根据不同环境(正式、测试)打包到不同目录
10-18
为了有效地管理这些环境，Vue提供了一种打包到不同目录的策略，以确保测试和正式环境的文件互相不影响，同时便于管理。 ### Vue.js环境区分打包的策略： #### 1. 环境变量配置 在Vue项目中，环境变量的配置是区分...
详解vue 不同环境配置不同的打包命令
10-17
在Vue项目开发中，通常会根据不同环境（如开发环境、测试环境、生产环境）来配置不同的构建命令，以满足不同阶段的打包需求。本文将详细讲解如何配置Vue项目以实现这一目标。 首先，我们需要在项目中安装一个名为...
vue项目分环境打包配置不同命令
06-26
vue实现分环境打包，给不同的环境配置相对应的打包命令，添加功能版，带有之前的基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子
【vue打包路径敏感解决】linux下vue打包路径大小写敏感问题分析解决
weixin_45974445的博客
12-30 2936
vue在linux下打包路径大小写敏感，问题解决 window下文件的路i的大小写是不敏感的，而linux下文件的路径名称需要区分大小写，在用linux打包文vue项目的时候会出现路径错误。要在linux 下完成打包，需修改文件中路径引用严格区分大小写。 此处通过python 脚本对 route/index.js 路径进行修改获取正确路径 # -*- coding:utf-8 -*- ''' Description: Author: xiaoming Date: 2021-12-30 15:22:01 '
vue项目打包在Linux系统报错
weixin_48258311的博客
03-12 1147
之前在Windows系统下打包的vue项目一切正常，后来在Linux系统下打包就报错，显示找不到文件，后来发现是在路由引入的过程中大小写和文件名不一样，比如文件名是index,但是在使用的过程中写成了Index，这种情况在windows 环境下是没有问题的，但是Linux环境下，大小写敏感，就会报错。
[Vue]Vue cli3 打包build 区分测试环境和正式环境
iChangebaobao的博客
08-05 2556
https://blog.youkuaiyun.com/qq_37639389/article/details/97789966 https://blog.youkuaiyun.com/linbenjian/article/details/85261201
vue项目分环境部署
Think_and_work的博客
08-23 1671
整起来
VUE开发--环境配置
雨中深巷的油纸伞
08-20 257
一、开发工具 Visual Studio Code 二、环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像（http://npm.taobao.org/） $ npm install -g cnpm –registry=https://registry.npm.taobao.org webpack: 它主要的用途是通过 Commo
vue项目部署和镜像打包
m0_46393656的博客
03-09 1885
需要注意的是，这种代理配置只适用于开发环境，当你打包部署到生产环境时，前端代码会被编译为静态资源文件，无需再配置代理。在生产环境中，你需要确保前端静态资源文件与后端项目部署在同一个域名下或通过其他方式进行跨域配置。在 Vue 前端项目中配置后端项目的访问地址可以通过修改项目的配置文件来实现。在 vue.config.js 中，可以使用 devServer 字段来配置开发服务器的代理。通过以上配置，当你在 Vue 项目中发起以 /api 开头的请求时，开发服务器会将请求代理到后端地址。替换为实际的后端地址。
vue项目搭建及打包运行
z19799100的博客
04-25 3517
一、概述 我们使用Vue.js一定要安装node.js吗？准确的说是使用vue-cli 搭建项目的时候需要nodejs。你也可以创建一个.html文件，然后通过如下方式引入 Vue，一样可以使用Vue。 <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 但是使用node是比较方便的，打包部署，解析vue单文件组件，解..
VUE工程不同环境配置及自定义环境值
Dream - to be coder
03-23 623
vue不同环境配置及变量定义
Vue进阶（贰幺贰）npm run build多环境编译
IT全栈 华强工作室
01-06 1867
在Vue项目中，可以通过修改文件并创建不同的环境配置文件来实现根据环境传递参数。通过在构建命令中指定环境模式，如或，结合在代码中使用环境变量，可以在不同环境下进行自定义操作和配置。在Vue组件中，可以使用访问这些环境变量。本文将详细介绍如何在Vue项目中使用命令根据环境传递不同参数。
Vue项目环境区分打包及命令配置详解
本文将详细介绍如何在Vue项目中实现分环境打包，并结合具体配置和代码示例，阐述如何添加特定的功能版，如本地数据请求、页面间跳转动画效果、header组件的使用以及使用scss。 ### Vue项目分环境打包配置 #### 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值