Vue 打包和开发参数差异的原因

于 2023-09-30 21:29:32 发布
阅读量175 收藏
点赞数
文章标签： vue.js javascript 前端 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CoderExtra/article/details/133442298
版权
编程 专栏收录该内容
415 篇文章 ¥29.90 ¥99.00
订阅专栏
本文探讨Vue项目中开发和打包参数的区别，包括开发工具、构建模式、热重载等开发参数，以及源映射、生产模式和代码优化等打包参数。这些参数差异旨在优化开发体验、调试能力和生产环境的性能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在 Vue 开发中，我们通常会使用不同的参数配置来进行开发和打包。这些参数的差异主要是为了满足不同的需求和环境。下面我将详细说明为什么会有这些差异，并提供相应的源代码来帮助理解。

  1. 开发参数

开发参数用于在开发阶段提供更好的开发体验和调试能力。以下是常见的开发参数及其作用：

  • devtool: 开发工具，用于生成源映射文件，方便在浏览器中调试代码。常见的选项有 eval、source-map 等。在开发阶段，使用 source-map 可以提供更好的调试体验。

  • mode: 指定构建模式，常见的选项有 development 和 production。在开发阶段，我们使用 development 模式以便获得更多的调试信息和更快的构建速度。

  • hotReload: 热重载，开启后在保存代码时自动重新加载页面，方便开发者实时查看代码变化。在开发阶段，我们通常会启用热重载功能。

以下是一个示例的 vue.config.js 文件，展示了一些常见的开发参数的配置：


                

                
                
        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    



                



	

		

			

				
					
Vue打包优化 详解

				
			

			

				

					zhenghao35791的专栏
				

				

					06-25
					
					2万+
					
				

			

		

		

			
				
这里写自定义目录标题分析工具Coverage：查看代码的使用状况除移死代码懒加载代码webpack-bundle-analyzer：打包资源树瘦身开始1. productionSourceMap:false2.路由懒加载3. 关闭Prefetch4.element-ui组件按需加载5.使用 CDN 外部加载资源-vue, vuex, vue-router，axios6.使用 CDN 外部加载资源-...

			
		

	



                

            
              



	

		

			

				
					
vue中两种方法如何区分测试、上产包

				
			

			

				

					y1009666319的博客
				

				

					09-28
					
					641
					
				

			

		

		

			
				
总结

第一种方法采用粘贴复制法，把配置复制一套出来，然后改一些参数，最后在增加一条命令即可。比较简单快捷
第二种方法需要依赖cross-env，然后在配置中修改参数，参数中多了一层判断，最后再增加一条命令。

第一种方法:

package.json中新增命令行脚本test命令,并指向build文件夹下的test.js。

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.con

			
		

	



              


  
              

                


	

		

			

				
					
vue项目打包上线后页面样式与开发页面不一致

				
			

			

				

					朽木自雕的博客
				

				

					06-10
					
					4142
					
				

			

		

		

			
				
vue项目打包上线后页面样式与开发页面不一致

原因：

打包的过程会进行优化，导致引入样式文件的顺序发生变化

解决办法：

将自己写的样式文件放在最后面，框架什么的放在前面

注意：每个组件的样式文件记得加上scoped，防止样式冲突




...

			
		

	





	

		

			

				
					
vue打包后如何区分开发、测试和生产等不同的开发环境

					
热门推荐

				
			

			

				

					qq_35430000的博客
				

				

					05-28
					
					2万+
					
				

			

		

		

			
				
看过vue和webpack api的同学都知道，使用npm run dev可以运行开发环境的代码，使用npm run build就是打包生产环境的代码。但是如果我还有测试环境和预发布环境，运行npm run build命令只能在生成环境也就是线上环境运行，那我的测试和预发布环境怎么打包?

参考了网上的一些文章，我觉得还是从 axios调用接口api，修改 axios的 baseURL入手比较方便...

			
		

	



		

			
		



	

		

			

				
					
Vue项目本地运行和打包后样式不同怎么办

				
			

			

				

					sfyjknvcx的博客
				

				

					06-02
					
					7960
					
				

			

		

		

			
				
大家好，我是南宫。今天来分享一个小问题的解决方法，问题可能不是很具体，可以说是介绍一个思路了。有的时候vue项目本地运行时样式正常，打包部署后样式异常，解决方法可以看看这篇文章。

			
		

	





	

		

			

				
					
vue-cli项目根据线上环境分别打出测试包和生产包

				
			

			

				

					weixin_43868943的博客
				

				

					09-27
					
					1324
					
				

			

		

		

			
				
vue-cli项目根据线上环境分别打出测试包和生产包
1、在build文件夹中新建test.js,内容可以直接拷贝同目录build.js内容,修改const webpackConfig = require(’./webpack.test.conf’)。
'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'test'...

			
		

	





	

		

			

				
					
使用ant-design-vue中，开发环境与生产环境的样式不一样

				
			

			

				

					py_boy的博客
				

				

					12-04
					
					2990
					
				

			

		

		

			
				
今天碰到个问题，本地使用ant-design-vue开发时，本地服务器上面的所有样式都没问题，界面功能十分完美，心里美滋滋的可以划水了，立刻上传到服务器。结果服务器上面的页面样式与本地的样式不一样，心里真的mmp了。通过修改本地代码，然后消除相关loading，上传到自己服务器上，开始了漫漫f12对比样式。最后是ant-design-vue里面的样式在本地可能不存在覆盖，服务器上面有相关覆盖，这个...

			
		

	





	

		

			

				
					
electron框架+打包vue+react 成exe 安装下一步客户端桌面程序

				
			

			

				

					08-28
				

			

		

		

			
				
总的来说，使用`Electron`框架结合`Vue.js`或`React.js`开发桌面应用，需要对Node.js环境、依赖管理、文件路径处理和系统差异有深入理解。通过解决上述问题，可以成功将项目打包为可执行的`.exe`文件，实现客户端...

			
		

	





	

		

			

				
					
详解Vue微信公众号开发踩坑全记录

				
			

			

				

					12-09
				

			

		

		

			
				
 JS-SDK需要向服务端获取签名，且获取签名中需要的参数包括所在页面的url，但由于单页应用的路由特殊，其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题 解决方案  授权登录  授权流程如下：  ...

			
		

	





	

		

			

				
					
详解vue 不同环境配置不同的打包命令

				
			

			

				

					10-17
				

			

		

		

			
				
比如，我们可以设置npm run build--test来打包测试环境，npm run build--prod来打包正式环境，npm run build--develop来打包开发环境。这些命令通过cross-env来设置环境变量，并调用构建脚本。  具体来讲，这个过程...

			
		

	





	

		

			

				
					
解决Vue项目打包后文件过大问题

				
			

			

				

					潇潇来吃瓜的博客
				

				

					03-23
					
					4555
					
				

			

		

		

			
				
在做首屏加载时间优化时，会发现chunk-vendors.js这个文件巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。

			
		

	





	

		

			

				
					
vue项目打包出的文件大小异常

				
			

			

				

					_____青絲
				

				

					12-22
					
					1551
					
				

			

		

		

			
				
vue开发了三个小项目，打包结果发现有个项目的js文件过大比另一个页面更多的项目要打了1M多，明显不正常。
最后发现是.env.production里面的内容引起：
原来：
NODE_ENV="production"                                  
VUE_APP_DIR_NAME="distproduction"        

这么写的结果是打包出的js不会压缩，打包出1.js  2.js  chunk-wendors.js等，可以发现里面的代码空格等未压缩导致ch

			
		

	





	

		

			

				
					
对于vue项目打包的一些思考

				
			

			

				

					imkaifan的博客
				

				

					12-28
					
					1088
					
				

			

		

		

			
				
对于vue项目打包的一些思考

			
		

	





	

		

			

				
					
让你秒懂 Vue  .env .env.development .env.production

				
			

			

				

					醒途
				

				

					05-22
					
					1万+
					
				

			

		

		

			
				
项目根目录下创建.env、.env.development和.env.production三个文件，各文件解释如下：
　　.env 无论开发环境还是生产环境都会加载的配置文件
　　.env.development 开发环境加载的配置文件
　　.env.production 生产环境加载的配置文件


环境变量的简单使用示例。需要注意，配置文件里的属性名必须以VUE_APP_开头，比如在.env文件这样声明一个环境变量：
VUE_APP_QQQ = `QQ`

然后就可以在代码里这样用了：
console..

			
		

	





	

		

			

				
					
vue项目打包之后样式与本地不一致

				
			

			

				

					weixin_45717240的博客
				

				

					08-11
					
					4518
					
				

			

		

		

			
				
项目中要大量修改element里面的css样式，所以项目打包之后

会出现样式和本地开发的时候样式有很多不一样，原因可能是css加载顺序有问题，样式被覆改了。



所以在mian.js里面这样修改：
‘./APP’和’./router’放在element css的后面，router放到最后



还有就是每个vue组件里的style要加scoped,这很关键，起到css不被组件之间重叠的作用。
...

			
		

	





	

		

			

				
					
vue项目打包部署页面错乱

				
			

			

				

					Erwinl的博客
				

				

					05-14
					
					832
					
				

			

		

		

			
				
vue项目打包后页面显示错乱
1、页面不显示
打开项目的config—>index.js，改动assetsPublicPath: '/'为assetsPublicPath: ‘./’

2、页面版面有问题
打开项目build目录下utils.js，添加 publicPath: ‘…/…/’




			
		

	





	

		

			

				
					
Vue 2 打包 测试 注意 事项

				
			

			

				

					weixin_44378370的博客
				

				

					03-04
					
					343
					
				

			

		

		

			
				
Vue项目打包分类
分为三种运行模式生产，开发，单元测试，可以分别进行配置。




项目
Value




电脑
$1600


手机
$12


导管
$1






Column 1
Column 2




centered 文本居中
right-aligned 文本居右





			
		

	





	

		

			

				
					
vue-cli 打包后请求地址和打包前的地址不一样

				
			

			

				

					qq_42987761的博客
				

				

					10-27
					
					1184
					
				

			

		

		

			
				
vue-cli 打包后请求地址和打包前的地址不一样
打包前 在vue-config.js里面进行设置的代理

打包后的请求跟地址栏的地址一样


想问一下这是怎么回事 需要怎么设置 希望大佬指点一下



			
		

	





	

		

			

				
					
vue开发环境生产环境测试环境打包

					
最新发布

				
			

			

				

					03-14
				

			

		

		

			
				
### Vue 项目多环境打包配置

#### 配置 `package.json` 中的脚本命令
为了区分不同的构建模式，在 `package.json` 文件内的 `"scripts"` 字段下定义特定于各个环境的构建指令[^2]。

```json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --mode development", // 开发环境构建
    "build:test": "vue-cli-service build --mode test",       // 测试环境构建
    "build:prod": "vue-cli-service build --mode production"  // 生产环境构建
  }
}
```

#### 创建 `.env.*` 文件来管理环境变量
对于每种工作流（开发、测试、生产），创建对应的`.env.development`, `.env.test`, 和 `.env.production`文件用于存储各自的环境参数。这些文件允许开发者轻松切换API端点或其他敏感数据而无需修改源码本身[^1]。

- **.env.development**
  
  ```plaintext
  VUE_APP_API_URL=http://localhost:8080/api/
  ```

- **.env.test**

  ```plaintext
  VUE_APP_API_URL=https://test.example.com/api/
  ```

- **.env.production**

  ```plaintext
  VUE_APP_API_URL=https://example.com/api/
  ```

#### 使用 Axios 进行 HTTP 请求时读取环境变量
当应用程序启动时，可以通过访问全局对象`process.env` 来获取当前环境下设定好的 API URL 地址，并将其应用到HTTP客户端实例中去[^3]。

```javascript
import axios from 'axios';

// 设置基础URL为VUE_APP_API_URL环境变量所指定的值
axios.defaults.baseURL = process.env.VUE_APP_API_URL;

if (process.env.NODE_ENV === 'development') {
  console.log('Development environment');
} else if (process.env.NODE_ENV === 'test') {
  console.log('Test environment');
} else {
  console.log('Production environment');
}
```

#### 安装并使用 Cross-env 工具统一跨平台支持
考虑到不同操作系统间可能存在差异化的环境变量语法问题，推荐安装cross-env库作为解决方案之一，从而确保无论在哪种平台上都能正确解析NODE_ENV等重要标志位[^4]。

```bash
npm install cross-env --save-dev
```

更新后的 package.json scripts 可能看起来像这样：

```json
{
  "scripts": {
    "serve": "cross-env NODE_ENV=development vue-cli-service serve",
    "build:dev": "cross-env NODE_ENV=development vue-cli-service build --mode development",
    "build:test": "cross-env NODE_ENV=test vue-cli-service build --mode test",
    "build:prod": "cross-env NODE_ENV=production vue-cli-service build --mode production"
  }
}
```

通过上述方法可以在Vue CLI 3.x版本及以上实现针对多个运行阶段的有效管理和自动化部署流程优化。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值