前端 - 简忆博客

使用版本号解决vue打包有缓存问题

问题描述在Vue.js项目中，打包后遇到缓存问题通常是因为浏览器缓存了旧的资源文件，导致用户即使刷新页面也无法看到更新后的内容。问题解决解决这类问题，你可以采取在引用静态资源时添加版本号或哈希值，确保每次文件更改后都会生成新的文件名。修改webpack配置（例如在Vue CLI项目中）:module.exports = { ; configureWebpack: { ; ; output: { ; ; ; filename: 'js/[name].[fullhash].js', ;// 主文件的哈希命名 ; ; ; chunkFilename: 'js/[name].[fullhash].js' ;// 动态导入的 chunk 文件也采用哈希命名 ; ; } ; }, ; lintOnSave: fa

解决vue路由跳转报错ERROR Navigating to current location ("/login") is not allowed

9天前前端

124 0

一、问题复现使用axios响应拦截器代码重定向到login登录页面/* 响应拦截器 */ axios.interceptors.response.use(function (response) { // ①10010 token过期（30天） ②50000000 token无效 if (response.data.code === 50000000) { window.localStorage.removeItem('token') window.localStorage.removeItem('activePath') router.replace({ path: '/login' // 到登录页重新获取token }) } else if (response.data.token) { // 判断token是否存在，如果存在说明需要更新token window.localStorage.setItem('

解决H5 短信验证时,点击页面input框键盘会自动填充短信验证码两次问题

2025-09-02 前端

348 0

一、问题表现前端在编写H5登录页面的时候，出现使用短信验证时，点击输入框自动填写验证码，页面键盘会自动填充短信验证码两次。二、问题原因点击自动填充短信，input框里会出现两次三、问题解决给 input 添加 maxlength 属性，并把值长度设定进去。如下所示：<input type="text" placeholder="验证码" class="yzm" maxlength="5"> 这样的话，这里设了是只能输入5位，大家可以根据需求填写字数，就不会多填充一遍了。

关于运行vue项目报错Module not found: Error: Can't resolve 'os' 问题解决方法

2025-06-03 前端

730 0

一、问题原因运行yarn serve报错如下：yarn run v1.22.22$ vue-cli-service serve;INFO;Starting development server...;ERROR;Failed to compile with 1 error;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;11:24:17;error;in ./src/views/Integral/IntegralOrder.vue?vue&type=script&lang=jsModule not found: Error: Can't resolve 'os' in 'F:\study\vue\vue2-element-shop\src\views\Integral'BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core mod

解决运行yarn install命令报错bash: yarn: command not found问题

2025-05-30 前端

613 0

运行yarn install命令报错bash: yarn: command not found如下：$ yarn installbash: yarn: command not found出现这个问题是因为vue环境下没有安装yarn导致的，解决方法是执行下方安装命令npm install --global yarn 查询是否安装成功yarn --version 再次执行npm yarn就不再报错了。

uni-app微信小程序实现发送验证码+倒计时功能

2024-10-20 前端

1454 0

一、效果展示：用户输入手机号，验证手机号是否正确，正确发送验证码，校验验证码。二、uniapp前端界面代码<template> <view class="fixed_menban"> <view class="fixed_c"> <view class="colse" @click="colse"> <image src="../../static/colse.png" ></image> </view> <view class="link"> <view class="left_phone"> <image src="../../static/phone.png" ></image> </view> <view class="center_link"> <image src=".

Layui的layedit富文本编辑器使用方法教程

2024-10-20 前端

1477 0

layui框架自带的富文本编辑器，简介方便，不需要安装任何插件，以下是使用教程。1、HTML代码;<div class="layui-form-item"> ;;;;<label class="layui-form-label">内容</label> ;;;;;<div class="layui-input-block"> ;;;;;;<textarea name="content" class="layui-textarea" id="content" placeholder="请输入内容" style="display: none;"></textarea> ;;;;</div> ;;</div> 2、js代码：实例化和接受编辑器提交的内容<script> ;;layui.use(['form','layedit'], function () { ;;

Layui实现多图上传预览和删除功能

2024-10-20 前端

1176 0

在开发项目时，我们有时需要用到多图上传，比如商品缩列图等，我们可以使用layui自带的多图上传，不需要安装任何插件。效果展示：1、前端HTML部分代码<div class="layui-form-item layui-form-text"> ;;;;<label class="layui-form-label">商品图</label> ;;;;<div class="layui-input-block"> ;;;;;;<button type="button" class="layui-btn" id="test2">多图片上传</button> ;;;;;;<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%"> ;;;;;;;;<d

一个uniapp微信小程序图片裁剪工具插件invinbg-image-cropper推荐

2024-08-16 前端

2403 0

一、需求分析在做uniapp开发的时候，做图片上传，需要对用户上传的图片进行裁剪后，再上传图片，然后给到用户自己去裁剪图片。二、插件截图三、功能描述用户点击上传图片，可以对其进行裁剪，旋转，编辑，放大缩小四、插件下载微信扫描下方，二维码关注公众号，回复"图片裁剪"，详细操作，请看图片五、插件使用方法1、下载好插件，放到组件目录 components 目录下，没有 components 目录的话就新建目录，如下图：2、放置上传图片按钮<button size='primary' lang="zh_CN" @click="onChooseFile" class="btn3">上传图片</button&g

关于微信小程序框架wepy框架环境安装只能安装1.7版本解决方法

2024-08-11 前端

1104 0

一、问题描述使用npm安装wepy环境一直只能安装1.7.3版，以前是可以安装2.1.0版本。执行查看版本npm show wepy-cli versions 这里可以看到版本最新只能是1.7.3版本继续查看npm官网：https://www.npmjs.com/package/wepy-cli可以看到npm上的wepy版本是1.7.3版本，后面打开腾讯官方的wepy包，看到最新版本是2.1.0二、问题解决@wepy/cli@next 是指向最新的预发布版本（如 2.x 版本），而 wepy-cli 则是旧版本（如 1.7.3）。这表明 @wepy/cli 包含了更现代的功能和更新，而 wepy-cli 是旧版的包。切换到 @wepy/cli 你可以使用更新的功能和版本

vue-elementUI去掉input上下箭头

2024-08-08 前端

1195 0

一、问题描述vue中使用elementUI，在使用input输入框，设置type为number数字类型是，会出现如下上下箭头问题；如下所示：二、问题解决出现这个问题，只需要重置下elementUI的input样式即可解决，如下： /* element样式重置 start */ /* 去掉input尾部上下小箭头 start */ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ ; -webkit-appearance: none !important; ; -moz-appearance: none !important; ; -o-appearance: none !important; ; -ms-appearance: none !important; ; appearance: none !important; ; marg

解决visual studio code (vscode)安装时没有选择安装路径问题

2024-08-06 前端

4950 0

一、问题描述电脑重新安装系统之后，在安装visual studio code的时候没有选择安装路径选项的问题，只能默认都是安装到c盘二、问题解决出现这个问题，我们只需要改下注册表即可1、首先进入注册表win+r键，输入regedit2、进入注册表之后，打开路径计算机\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall\右击圈住的删除即可。3、重新安装vscode，可以看到已经有选择安装路径的选项了。

$关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法$

关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法

2024-07-28 前端

987 0

问题复现：Windows11 在 vscode中运行 wepy 项目报如下错误：wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置行:1 字符: 1+ wepy build --watch+ ~~~~;;+ CategoryInfo;;;;;: SecurityError: (:) []，PSSecurityException;;+ FullyQualifiedErrorId : UnauthorizedAccess问题原因：这个错误表明你在尝试运行 wepy 命令时，遇到了 PowerShell 的脚本运行策略限制。默认情况下

解决小程序wepy框架运行报错问题ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev"

2024-07-26 前端

924 0

微信小程序创建wepy框架项目，运行报如下错误：wepy build --watch[15:55:58] ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev".[15:55:58] ERR! init Can't resolve '@wepy/compiler-less' in 'F:\study\wepy\myproject1'[15:55:58] ERR! init Make sure module "@wepy/compiler-babel" is installed. If not please try "npm install @wepy/compiler-babel --save-dev".[15:55:58] ERR! init Can't resolve '@wepy/compiler-babel' in 'F:\study\wepy\

Vue3项目如何安装element plus

2024-07-05 前端

983 0

Element Plus 基于Vue 3,面向设计师和开发者的组件库安装# NPMnpm install element-plus --save # Yarnyarn add element-plus # pnpmpnpm install element-plus 一、全局引入打开main.jsimport { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' ; const app = createApp(App) ; app.use(ElementPlus) app.mount('#app') 二、按需引入安装npm install -D unplugin-vue-components unplugin-auto-import Vite打开vite.config.js引入import { defineConf

vue3+element plus使用vuex实现折叠导航菜单

2024-07-05 前端

1103 0

vuex简介Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。一、安装vuexnpm install vuex -S 二、创建vuex文件夹在src目录下创建store文件夹，并创建index.js文件，编写如下代码import { createStore } from "vuex"; export default createStore({ ; ; state: { ; ; ; ; isCollapse : true ; ; }, ; ; mutations: { ; ; ; ; updateIsCollapse(state, payload){ ; ; ; ; ; ; state.isCollapse = !state.isCollapse ; ; ; ; } ; ; }

关于MacBook电脑安装yarn报错errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn解决办法

2024-07-04 前端

985 0

yarn介绍：Yarn是facebook发布的一款取代npm的包管理工具yarn特点：速度超快：Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率，因此安装速度更快。超级安全：在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。超级可靠：使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。然而在Mac下安装会遇到问题：报没权限安装问题，如下所示：npm install -g yarnnpm notice;npm notice New major version of npm available! 8.19.4 -> 10.8.1npm noti

yarn使用vite快速创建vue3项目及错误问题解决

2024-07-04 前端

2328 0

一、为什么要用vite?当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。Vite 通

如何使用vue3+vant创建底部菜单组件

2024-06-27 前端

1117 0

在前端项目开发中，会出现底部导航菜单通用的情况，我们就需要把底部菜单导航做成公用组件，一下是一个方法，供大家参考和使用。一、效果展示：二、代码编写1、在components文件夹中创建底部菜单组件Footer.vue<template> ;;<div class="footer"> ;;;;<div class="item"> ;;;;;;<router-link to="/home" class="nav-item" active-class="nav-color"> ;;;;;;;;<van-icon name="wap-home-o" size="30"/> ;;;;;;;;首页 ;;;;;;</router-link> ;;;;</div> ;;;;<div class="item"> ;;;;;;<r

一文教你如何运行别人vue的项目

2024-06-27 前端

940 0

拿到别人开发的vue项目，如何运行呢？本文教大家如何运行别人项目1、前提条件，电脑已安装vue环境，没有的话请移步之环境安装Macbook安装vue开发环境，mac配置vue环境、脚手架Nodejs（npm）环境和vue环境安装教程2、删除package-lock.json文件package-lock.json记录了整个node_moudles文件夹的树状结构，还记录了模块的下载地址，但是它是基于项目作者的npm版本库生成的，若不删掉这个依赖文件，容易出现npm版本差异导致的报错。3、切换项目目录4、清除npm缓存npm clean cache -f 5、重新安装依赖npm install 6、运行项目npm run serve

mac运行vue项目（已有node_modules）报错/node_modules/.bin/vue-cli-service: Permission denied

2024-06-26 前端

1307 0

mac运行vue项目报错：npm run serve sh: /Applications/遇见的文件夹/study/vue/vue-element-blogs/node_modules/.bin/vue-cli-service: Permission denied出现这个问题，是因为没权限。解决方案；只要执行chmod 777 +文件路径，即可成功解决。chmod 777 /Applications/遇见的文件夹/study/vue/vue-element-blogs/node_modules/.bin/vue-cli-service 重新执行命令不再报错了。npm run serve

使用版本号解决vue打包有缓存问题

解决vue路由跳转报错ERROR Navigating to current location ("/login") is not allowed

解决H5 短信验证时,点击页面input框键盘会自动填充短信验证码两次问题

关于运行vue项目报错Module not found: Error: Can't resolve 'os' 问题解决方法

解决运行yarn install命令报错bash: yarn: command not found问题

uni-app微信小程序实现发送验证码+倒计时功能

Layui的layedit富文本编辑器使用方法教程

Layui实现多图上传预览和删除功能

一个uniapp微信小程序图片裁剪工具插件invinbg-image-cropper推荐

关于微信小程序框架wepy框架环境安装只能安装1.7版本解决方法

vue-elementUI去掉input上下箭头

解决visual studio code (vscode)安装时没有选择安装路径问题

关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法

解决小程序wepy框架运行报错问题ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev"

Vue3项目如何安装element plus

vue3+element plus使用vuex实现折叠导航菜单

关于MacBook电脑安装yarn报错errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn解决办法

yarn使用vite快速创建vue3项目及错误问题解决

如何使用vue3+vant创建底部菜单组件

一文教你如何运行别人vue的项目

mac运行vue项目（已有node_modules）报错/node_modules/.bin/vue-cli-service: Permission denied

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用版本号解决vue打包有缓存问题

解决vue路由跳转报错ERROR Navigating to current location ("/login") is not allowed

解决H5 短信验证时,点击页面input框键盘会自动填充短信验证码两次问题

关于运行vue项目报错Module not found: Error: Can't resolve 'os' 问题解决方法

解决运行yarn install命令报错bash: yarn: command not found问题

uni-app微信小程序实现发送验证码+倒计时功能

Layui的layedit富文本编辑器使用方法教程

Layui实现多图上传预览和删除功能

一个uniapp微信小程序图片裁剪工具插件invinbg-image-cropper推荐

关于微信小程序框架wepy框架环境安装只能安装1.7版本解决方法

vue-elementUI去掉input上下箭头

解决visual studio code (vscode)安装时没有选择安装路径问题

关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法

解决小程序wepy框架运行报错问题ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev"

Vue3项目如何安装element plus

vue3+element plus使用vuex实现折叠导航菜单

关于MacBook电脑安装yarn报错errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn解决办法

yarn使用vite快速创建vue3项目及错误问题解决

如何使用vue3+vant创建底部菜单组件

一文教你如何运行别人vue的项目

mac运行vue项目（已有node_modules）报错/node_modules/.bin/vue-cli-service: Permission denied

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录