Vue开发中常见问题汇总

已于 2023-02-07 17:13:26 修改
阅读量1.2k 收藏
点赞数
分类专栏： Vue.js 文章标签： vue.js 资源文件404 css404
于 2021-12-07 11:52:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Andrasen/article/details/121765361
版权

1.项目打包后，资源文件报404错误
在config文件夹下的index.js文件中，对于assetsPublicPath其实本身有很好的注释说明，但是可能很多人不会留意这个提示
在这里插入图片描述
这段注释的意思就是assetsPublicPath跟项目发布时的目录结构是有关系的，如果项目放在 https://foo.github.io/bar/ 下，那么assetsPublicPath配置应该就是 /bar/，不过我们可以直接写 ./ 来解决这个问题

2.css中引入资源文件：如图片或者字体文件，打包后报404错误
实际上这个是css loader的配置问题，在build文件夹下的utils文件中，如果使用的是MiniCssExtractPlugin这个插件，则需要按如下图配置publicPath
在这里插入图片描述
如果使用的是ExtractTextPlugin插件，则按照下图配置publicPath
在这里插入图片描述

3.css中通过别名引入路径报错
通常情况下，vue使用@符号来代替src，但在css中使用 @ 符号，需要在@前面加上 ~ 符号
在这里插入图片描述

4.Git: husky > npm run -s precommit
a.卸载husky插件：npm uninstall husky
b.项目文件夹隐藏的文件夹.git中删除pre-commmit文件夹

小杰90s
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue常见面试真题汇总
10-25
Vue.js 是一个流行的轻量级前端JavaScript框架，由尤雨溪开发，用于构建用户界面。...以上是Vue.js面试中常见的知识点，涵盖了框架的基本概念、核心特性和高级用法，掌握这些内容能帮助开发者在面试中脱颖而出。
vue常见面试题集合汇总
04-10
简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了angular的特点，在数据操作方面更为简单； 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着...
Git开发工具
qq_38969618的博客
12-02 6048
常用命令： 1.git commit提交时，跳过husky的git hooks钩子的校验： git commit --no-verify -m "xxxx提交信息" 2.
git关闭commit时的语法检测husky
weixin_46733392的博客
08-09 4531
git 语法检测
(vscode git提交到本地报错)git commit 提交时报错：husky ＞ pre-commit hook failed
qq_41920758的博客
05-16 717
1、卸载husky。Git提交代码的时候，pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。2、进入项目的.git文件夹(文件夹默认隐藏,可先设置显示或者命令ls查找),再进入hooks文件夹,删除pre-commit文件,重新git commit -m ‘xxx’ git push即可。3、将git commit -m “XXX” 改为 git commit --no-verify -m “XXX”我是是用第2种方法解决了，提交成功了。原因：代码风格检查未通过。
vue3+vite+ts配置eslint+husky
每文的博客
05-19 2462
vue3+vite+ts配置eslint+husky 创建项目命令 yarn create vite vue3-vite-ts --template vue-ts eslint代码风格检查，prettier进行格式化代码 安装相关依赖 ； yarn add eslint eslint-plugin-vue eslint-define-config --dev # eslink yarn add prettier eslint-plugin-prettier @vue/eslint-config-pr
git常见bug及其解决方案
qq_37161741的博客
12-05 2114
git status 查看状态中是否有效忽略了 git add命令主要用于把我们要提交的文件的信息添加到索引库中；git commit命令是git将依据索引库中的内容来进行文件的提交。 git add -u []: 把中所有tracked文件中被修改过或已删除文件的信息添加到索引库。它不会处理untracted的文件。 git add -A: []表示把中所有tracked文件中被修改过或已删除文件和所有untracted的文件信息添加到索引库。省略表示.,即当前目录 git add -i []命令查看中被
git commit 提交的时候报错husky ＞ pre-commit hook failed (add --no-verify to bypass)（解决办法）
weixin_43909743的博客
03-25 1438
起点 问题原因： 　　 pre-commit钩子惹的祸 　　当你在终端输入git commit -m"XXX",提交代码的时候， 　　pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。 　　如果代码不符合相应规则，则报错，它的检测规则就是根据.git/hooks/pre-commit文件里面的相关定义。 　次要原因： 　 创建vue项目时，eslint校验 是否在 commit提交是进行校验，我想不选是不是没有校验，······就没选，打脸 解决办法 卸载husky 删
git pre-commit hook failed 解决办法 卸载husky
热门推荐
HennyChen的专栏
06-20 3万+
husky > npm run -s precommit (node v8.11.3)'lint-staged' �����ڲ����ⲿ���Ҳ���ǿ����еij������������ļ���husky > pre-commit hook failed (add --no-verify to bypass)出现上述问题，可以选择 卸载husky https://www.npmjs...
常见vue面试题汇总系列
02-04
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、数据驱动和响应式设计为核心，大大简化了Web应用的构建。以下是对Vue面试题中涉及的一些关键知识点的详细解释： 1. **Vue-Router 动态路由**：动态路由...
Vue最新面试题、常见面试题及答案解析汇总
02-20
Vue.js 是一款非常流行的...以上就是Vue.js面试中常见的知识点，掌握这些不仅能帮助你应对面试，还能提升你的Vue项目开发能力。在实际工作中，不断学习和实践，深入理解这些原理和技巧，将使你成为更出色的Vue开发者。
vue开发不可避免走过的坑汇总1
08-08
以下是一些常见的Vue开发陷阱，以及如何避免它们。 首先，我们讨论的是在循环中避免使用`v-if`。Vue.js设计时更倾向于使用`v-for`指令来处理数据迭代，而不是在循环内使用`v-if`进行条件判断。这是因为`v-if`会创建...
husky - pre-commit hook exited with code 1 (error)
weixin_45337447的博客
01-30 1604
或者直接在项目根目录下执行npm uninstall husky --save也可以，再次提交，自动化测试功能就屏蔽掉。3、进入项目的.git文件夹(文件夹默认隐藏,可先设置显示或者命令ls查找),再进入hooks文件夹,删除pre-commit文件,重新git commit -m 'xxx' git push即可。1、git comit - m "XXXXXX"--no-verify 是 Git 命令的一个选项，用于在提交代码时绕过 Git 钩子（hook）的校验。一、解决方式（绕过规范）
Commit 时报 husky错
涂山山主的博客
09-03 377
方法1.删除 package.json ------------ "husky":"^4.2.5" 方法2.绕过检查 git commit -m "提交页面备注 绕过eslint检查" --no-verify
git commit 怎么跳过 husky, commitlint 的检查
最新发布
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-02 425
我们引入 commitlint 是为了保障代码入库的质量，但是有些时候，我们需要应急处理，比如你在升级框架时，通常不是一两天能解决的，可能希望临时把代码提交到一个分支，而这个时候，你改造的代码可能会有很多报错，这就意味着很难通过 commitlint 的检查。需要注意的是,这仅仅是应急使用，不要在正常开发节奏中跳过 commitlint 检查，这可能会导致 commit 质量下降,应该谨慎使用这些方法。可以在 commitlint 配置中设置忽略包含特定关键词的 commit。可以临时重命名或删除。
【解决】前端开发中的5大痛点
高灯GFE
02-24 502
如何优雅且快速的切换Node版本？如何统一项目中包管理器的使用？如何养成规范GitCommit编写习惯？如何不Copy快速开发相似的页面/组件？如何编写CSS会让同事更愿意阅读？；；；。通过在install正式执行前通过在进程中获取可以区别当前使用的包管理器的特殊标识来决定是允许还是中断执行。husky7：在git执行的生命周期进行hook，替代git自带的hooks；commitizen/cz-cli：通过交互的方式生成规范的GitCommit信息；
解决umi中lint-staged和Husky导致的控制台报错
m0_57321205的博客
01-19 571
又要我提交正确的消息格式，无语了，难道每次都要我按照这种格式提交吗，于是我想要关闭lint-staged和Husky，弄了半天也没有效果，索性直接将lint-staged和Husky删了。今天遇到了一个问题，当我git commit的时提交失败并在终端上显示下面的信息。于是我按照终端所显示的问题把代码修改了一遍再次提交，结果又出现了问题。，将 umi lint 与 Git 工作流结合使用。再将项目根目录下的.husky文件删除即可。
git 使用husky时候设置了pre-commit，但我们某个commit又不想执行pre-commit
mrhaoxiaojun的博客
11-09 4773
因为当你在终端输入git commit -m “XXX”,提交代码的时候 pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。 如果代码不符合相应规则，则报错，而它的检测规则就是根据.git/hooks/pre-commit文件里面的相关定义 网络中查找的几种方法（推荐第三种） 1、卸载husky。只要把项目的package.json文件中devDependencies节点下的husky库删掉，然后重新npm i 一次即可。或者直接在项目根目录下执行npm uninstall
(vscode git提交到本地失败)git commit 提交时报错：husky ＞ pre-commit hook failed (add --no-verify to bypass)
旗袍不开、怎么得胜？
10-09 4853
(vscode git提交到本地失败)git commit 提交时报错：husky > pre-commit hook failed (add --no-verify to bypass) 错误也体现为： vscode点小√，提交到本地时失败。 原因：代码风格检查未通过 Git提交代码的时候，pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。如果代码不符合相应规则，则报错，而它的检测规则就是根据.git/hooks/pre-commit文件里面的相关定义。 解决办法
"Ant Design Vue开发中UI组件问题汇总及上传文件的优化处理
开发中遇到的一些UI组件问题包括对Ant Design和Element UI这两个流行的UI组件库的优缺点以及在使用Ant Design Vue官网提供的Upload组件时遇到的一些问题和解决方案。 首先，Ant Design和Element UI都是基于Vue框架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值