vue项目中遇到的部分问题解决方案汇总（长期更新）

已于 2022-04-27 10:32:44 修改
阅读量1.7k 收藏 1
点赞数
分类专栏： vue使用经验篇 文章标签： javascript vue.js
于 2022-04-27 10:17:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43569862/article/details/124093274
版权
本文汇总了在Vue项目中遇到的webpack打包问题，包括js文件名未生成hash值和node-sass升级后vue.config.js中sass预处理的问题。解决方法包括设置环境变量NODE_ENV为'production'以启用hash值，以及将sass-loader的prependData属性改为additionalData来解决兼容性问题。

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

  1. webpack打包后js文件名为1.js, 2.js, 3.js而非不规律hash值得问题

    vue打包 在环境变量NODE_ENV === 'production’时会自动给打包后得js文件加入hashi值 配置打包项文件 让环境变量 NODE_ENV = ‘production’ 即可

  2. webpack打包环境变量配置文件
    1.修改package.json中srcipts的对应命令
    如:

    "serve": "vue-cli-service serve  --mode dev",
"build": "vue-cli-service build  --mode pro"

    给对应编译方案加入 --mode + 文件名可打包全局变量（在不配置得情况下serve命令默认读取.env.development文件, build默认读取 .env.production文件）
    2.加入对应编译文件 .env.dev .env.pro 文件内容示例如下

    NODE_ENV
最低0.47元/天 解锁文章
供水管网漏损及智能化监测改造解决方案
liu854046222的专栏
12-21 440
经过对供水管网漏损及智能化监测改造项目的深入调研，我们得出以下结论：大数据综合支撑平台：平台功能全面，涵盖单点登录、系统运维管理、基础信息管理等多个模块，为整个项目提供了坚实的数据支撑。物联网管理平台实现了物联网设备的统一管理和数据接入，为管网监测提供了可靠的数据来源。一体化门户整合了生产、管网、营销等多个方面的数据，为管理者提供了全面的决策支持。智慧营销：营业收费系统实现了用户档案管理的自动化和抄表计费的智能化，大大提高了工作效率。
接口性能优化宝典：解决性能瓶颈的策略与实践
热门推荐
张彦峰的博客
12-01 173万+
本文深入探讨了提升接口性能的多种策略，涵盖了数据库优化、远程调用、异步处理、事务优化、缓存机制、分库分表等方面的技术。通过直面常见性能瓶颈，本文详细讲解了如何优化 SQL 执行效率、避免重复调用、减少事务复杂性、提高并发度，并提供了实际应用的最佳实践和技术方案。此外，文章还结合具体的案例，阐述了如何通过合理选择和设计优化方案，解决常见的性能问题，帮助开发者构建高效、可扩展的系统架构。
vue项目中常见问题及解决方案(推荐)
12-13
webpack项目中自动引入全局scss变量文件 　　假设我们有一个公共的scss变量文件variables.scss /*存放所有全局变量*/ $card-title:#C7D200; //首页 卡片标题颜色 $bc-color:#182037; $hoverColor: #7abef9; //链接hover颜色 $fontColor: #E6EFFF; //字体颜色-白色 　　webpack要识别scss，需要先安装sass的loader npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --
vue项目中遇到的一些问题和解决办法
Jermyo的博客
10-13 735
自己平时开发笔记使用 1、vue 生命周期 beforeDestroy 和 destroyed 调用 情境一：离开当前路由，会直接调用； 当前路由不使用 缓存，离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁 情景二：离开当前路由，不会直接调用，需要程序控制调用； 当前路由使用 缓存，离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁，需要使用路由钩子函数主动的调用 beforeRouteLeave(to, from, next
Vue.js常见问题及解决方案
尘埃的博客
03-14 537
虚拟 DOM: Vue 的虚拟 DOM 已经做了很多优化，但可以通过减少不必要的渲染（如使用 v-if 和 v-show 合理选择）来进一步提升性能。动态路由: 使用 :id 这样的参数来定义动态路由，并在组件中通过 this.$route.params.id 获取参数。通过理解和解决这些常见问题，开发者可以更高效地使用 Vue.js 进行开发，并构建出高性能、可维护的 Web 应用。.env 文件: 在项目根目录创建 .env 文件，定义环境变量，通过 process.env 访问。
vue使用技巧和项目中遇到的问题
明月如霜丶
12-04 1791
这里给大家分享一下vue中的一些技巧，希望对大家有用处。（话不多说上代码） 1，vue路由拦截浏览器后退实现表单保存类似需求（为了防止用户突然离开，没有保存已输入的信息。） //在路由组件中： mounted(){ }, beforeRouteLeave (to, from, next) { if(用户已经输入信息){ //出现弹窗提醒保存表单，或者自动后台为其保存 }else{ n...
Vue项目遇到的问题解决方案汇总---kalrry
kalrry
06-17 572
解决方案： 需求不让使用分页情况下可以使用分页测试 AntDesign
vue3项目遇见问题小结
weixin_45902074的博客
03-12 291
父组件传值给子组件，子组件接收方式和vue2不一样； 使用setup语法糖defineProps获取父组件传值，当拿到值想改变值时不能直接修改，会出现类型突变的错误，需要定义一个响应式值，然后使用watch监听值，每当值发生变化时将变化的值赋值给定义的响应值，然后在template使用。 vue3中使用watch时，需要引用； 当子组件向父组件事件传递 defineEmits vue3中父组件向孙组件传值 使用provide和inject 当父组件打开弹窗调用接口时使用pr...
Vue与React框架面试资料汇总
- 介绍在Vue或React项目中遇到并解决的一个复杂问题。 - 分享在Vue或React项目中使用第三方库和工具的经验。 5. 职场和发展: - 面试前的准备：包括对技术栈的复习和项目经验的梳理。 - 面试过程中的沟通技巧：...
Golang OAuth2 常见问题与解决方案
最新发布
Golang编程笔记的博客
05-08 1098
本文针对Golang开发者在实现OAuth2认证授权时遇到的典型问题，提供系统性解决方案。内容覆盖OAuth2核心流程（授权码模式、隐式模式、客户端凭证模式、资源所有者密码模式）的Golang实现细节，重点解决令牌生命周期管理、安全漏洞防范、跨平台适配等工程问题。通过理论分析与代码实战结合，帮助开发者建立健壮的认证授权体系。背景知识：OAuth2核心概念与Golang生态简介核心问题：令牌管理、状态验证、重定向安全等六大类问题解析解决方案：结合代码示例的分步实现指南。
vue3项目中遇到的一些问题
SpongeBob030的博客
07-25 345
ant design vue组件自定义样式的方法，vue3中页面跳转的写法，在html中较为复杂的表达式写法自定义table中每列的样式(根据数据显示不同样式)
记录vue项目中遇到的一点小问题
11-29
1、鼠标悬浮显示不同的背景图片，代码如下： 效果如图，页面初始效果： 鼠标悬浮后效果： 2、for 循环发送axios遇到的问题 问题背景： 在声动语商项目中，需求更改后，出现一个：教师发布课程的时候要求一个课程同时发送给多个班级。 现在的接口：每次只能发送一个班级的id,也就是：classesId字段只能传一个班级的id，因此为了满足这个新需求就想着：将select修改为多选，使用for循环循环用户选中的班级数组，使用axios发送创建课程请求。更改后的界面如下图所示： 问题复现： 思路：使用for循环，发送axios,发现请求发送的data中classesId总是最后一个，立马想到
在vue开发中遇到的各种问题及解决方案
03-13
在vue开发中遇到的各种问题及解决方案
Vue项目开发常见问题和解决方案总结
10-14
主要介绍了Vue项目开发常见问题和解决方案总结，帮助大家更好的利用vue开发，感兴趣的朋友可以了解下
Vue router使用指南
qq_37195936的博客
02-20 1237
一，什么是vue Router? vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。 至于我们为什么不能用a标签，这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行npm run b
Vue 项目中各种痛点问题及方案
前端达人
09-24 6962
作者：愣锤原文：https://juejin.im/post/6844903632815521799最近要求使用vue进行前后端分离开发微信公众号，不断摸索踩坑之后，总结出如下几点vue...
Vue/Vue-Cli/ElementUI报错bug+使用方案合集（持续更新）（24-11-11更新）
coderYYY的博客
05-15 6570
Vue/Vue-cli/ElementUI报错bug问题分析和解决方法，持续更新中
Vue 项目一些常见问题的解决方案
油墨香^-^的博客
09-23 691
所以，在传入 id 之前，可以先把表头所在的表格内容提取出来，插入到第二个表格里，从而将两个表格合并，这时候打印就不会有错位的问题了。函数里添加 ajax 请求，这样只有第一次进入到列表页的时候才会请求数据，当从列表页跳到详情页，再从详情页回来的时候，列表页就不会刷新。首先，要把项目所有的页面路由都列出来，再用后台返回来的数据动态匹配，能匹配上的就把路由加上，不能匹配上的就不加。在动态添加路由的过程中，如果有 404 页面，一定要放在最后添加，否则在登陆的时候添加完页面会重定向到 404 页面。
vue实际项目中遇到的问题和解决方式
橘露源的博客
06-27 3306
记录前端项目开发过程中遇到的比较不错的问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值