- 博客(65)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 Nuxt3配置二级域名，实现单包多二级域名
本文介绍了基于Nuxt3实现的"单包多二级域名"架构方案。该方案通过全局路由中间件、动态渲染等技术手段，支持主域名与多个二级域名共用同一SSR服务和代码包。核心实现包括：1)主域名访问自动跳转二级域名的route.global中间件；2)二级域名访问限制的subdomain.global守卫中间件；3)动态环境判断工具useEnvType；4)配置化的二级域名管理。该架构优化了SEO效果，提升了缓存利用率，同时保持了代码统一性，适用于需要多子域名扩展业务场景的旅游类网站。
2025-07-29 15:08:51
863
原创 Nuxt3进阶之二级域名配置全量详细版，一套代码服务多个二级域名。
本文介绍了基于Nuxt3实现的"单包多二级域名"架构方案，通过全局路由中间件、Nginx配置等技术手段，实现了主域名与多个二级域名共享同一SSR服务和代码包。文章首先解释了二级域名的概念及其在旅游行业中的重要性，然后详细展示了项目核心架构与文件结构，包括路由中间件、环境判断工具等关键模块。最后重点剖析了两个核心中间件的实现逻辑：route.global.js负责主域名跳转到二级域名的自动跳转，subdomain.global.js则作为二级域名守卫确保只能访问对应专题页。该方案具有自动跳
2025-07-29 14:09:25
226
原创 Nuxt3自动打包及自动修改端口号脚本
本文介绍了Nuxt3自动化打包及修改端口号的实现方案。通过Node.js脚本整合Nuxt3内置命令，自动完成生产环境构建、端口配置修改和服务测试全流程。脚本会替换.output/server/index.mjs中的默认端口3000为指定值，并验证服务启动状态。在package.json中添加相应命令即可一键执行。该方案适用于CI/CD流程，能有效提升部署效率，减少手动操作错误，同时支持扩展更多自动化功能。实施时需注意端口配置正确性和错误日志记录。
2025-07-10 09:53:39
384
原创 [nitro] [unhandledRejection] Error: [nuxt] instance unavailable
【项目依赖兼容性检查报告】发现当前项目与Nuxt 3.15.4存在4个主要兼容性问题：1）@ant-design-vue/nuxt（1.4.6）版本过旧；2）@nuxtjs/i18n（9.2.0）可能不兼容；3）@nuxtjs/tailwindcss（6.13.1）需升级；4）@pinia/nuxt（0.9.0）版本较低。此外，"latest"标签的Vue依赖存在稳定性风险。建议解决方案：删除node_modules等缓存后，使用npm install --legacy-peer-dep
2025-06-24 09:23:10
465
原创 Nuxt3 Cannot read properties of undefined (reading ‘createElement‘)
摘要（150字） "TypeError: Cannot read properties of undefined"报错通常因SSR阶段访问浏览器API导致。在Nuxt3/Vue3中，服务端渲染时无法访问document等对象，需将DOM操作移至onMounted或通过process.client判断客户端环境。第三方库兼容性问题可通过动态导入解决（await import('module')）。检查报错堆栈定位具体代码，确保插件/指令仅客户端运行。通用解决方案包括：1)延迟DOM访问时机
2025-06-23 14:30:13
520
原创 切换Node版本后，项目无法运行
摘要 解决前端构建问题的常见方法包括： 清理重装依赖：删除 node_modules 和锁定文件后重新 npm install 验证环境：检查 Node 版本兼容性，建议使用 nvm 管理版本 配置检查：确保 webpack 的 devtool 正确设置 sourcemap 生成方式 依赖排查：核对关键依赖（如 webpack/babel）的版本兼容性 路径修正：确认文件路径变更是否影响 sourcemap 映射 日志分析：启用 verbose 模式获取详细构建日志 对于 uniapp 项目，还需清除 HB
2025-06-04 15:36:07
544
原创 does not provide an export named ‘getActiveHead‘
文章摘要：在使用Nuxt3（v3.15.4）时出现does not provide an export named 'getActiveHead'报错，主要因@nuxtjs/i18n（v8.5.5）版本不兼容或依赖冲突导致。解决方案包括升级i18n至最新版或临时降级Nuxt至3.12.x。建议通过nuxi upgrade规范升级，并参考Nuxt3依赖矩阵预防类似问题。修复后需重启开发服务器验证功能。
2025-05-29 17:31:48
431
原创 解决 Nuxt3 使用 van-field 输入框聚焦时视窗被放大
背景：h5产品在ios手机上，点击输入框时发现视窗被放大，取消输入后视窗仍旧处于被放大状态，需要手动还原视窗大小或刷新页面，从用户体验上来说是非常不友好的。解决原理：单独对ios设备设置视窗缩放比例以及禁止缩放。
2024-12-06 14:40:36
423
原创 Nuxt3 动态路由URL不更改的前提下参数更新，NuxtLink不刷新不跳转，生命周期无响应解决方案
URL、参数动态变化 的动态路由，当你只更新参数而URL无改变的情况下，使用 NuxtLink 来实现页面刷新渲染，页面并不会刷新执行服务端渲染，这种情况的解决方案
2024-11-19 14:40:14
1109
1
原创 Nuxt3之使用lighthouse性能测试及性能优化实操
Nuxt3 前端性能优化实操记录，以及浏览器性能测试工具LightHouse 使用方法。
2024-11-08 14:30:04
2415
原创 kCFErrorDomainCFNetwork Code=303 或 1206 错误解决方案
kCFErrorDomainCFNetwork Code=303 或 1206 错误解决方案
2024-04-29 11:08:33
798
原创 uniapp打包发布ios-app出现白屏被退回
2、pages.json中配置了分包，取消掉即可解决正式版ios白屏问题，在自定义包或者真机是测不出来的。1、使用了pinia，并且在首页或者App.vue页面setup data域中直接使用pinia。4、缺失文件，请仔细检查引入的文件是否此存在或者第三方库文件是否齐备。3、代码错误导致了页面卡死不能正常出现页面，需要仔细检查代码。
2024-03-04 17:31:13
1643
原创 【菜比前端之不起眼小bug差点要我小命】Uniapp小程序发布小程序模拟器正常，但是真机无法打开问题
Uniapp小程序发布小程序在模拟器上运行正常，但是扫码打开体验版却有明显bug导致页面无法正常进行，如果早先发布的版本没问题，打开体验版前把旧的体验版删除，扫码新体验版就可复现bug。这种bug最不容易发现，但是往往会导致新用户无法打开小程序，导致小程序疯狂被差评！！！差评？这对前端程序员是极大的侮辱啊！！！最近刚优化完两小程序，就在这里总结下，能卡住小程序进不去首页或导致页面不能正常加载的bug，总结以下了几点…
2024-01-04 10:59:20
876
原创 exception:white screen cause create instanceContext failed,check js stack -＞ at useStore (app-servic
关于Vue3中调试APP触发异常：exception:white screen cause create instanceContext failed,check js stack -> at useStore (app-service.js:2309:15)解决方案
2023-12-28 09:42:06
2337
原创 Vue监听系统是否为暗黑模式
// 在 App.vue文件下定义即可 // useDark() 和 useToggle() 均需要安装 @vueuse/core 包 即可使用 npm install element-plus --save 安装 Element-Plus npm install @vueuse/core --save 安装 @vueuse/core if (window.matchMedi...
2023-12-14 11:35:00
1124
原创 uniapp滑动页面时警告Unable to preventDefault inside passive event listener due to target being treated as p...
翻译：没有添加被动事件监听器来阻止’touchstart‘事件，请考虑添加事件管理者’passive’，以使页面更加流畅。原因：由于浏览器必须要在执行事件处理函数之后，才能知道有没有掉用过preventDefault()，这就导致了浏览器不能及时响应滚动，略有延迟。所以为了让页面滚动的效果如丝般顺滑，从chrome56开始，在window、document和body上注册的...
2023-12-08 10:21:00
1329
原创 关于uniapp打包APP自定义基座调试，遇到首页同意网络权限后白屏问题
同意网络权限后白屏问题解决方案：1、在App.vue文件中，onShow生命周期内添加一段代码，检测是否同意使用互联网权限： uni.onNetworkStatusChange(function(res) { console.log('onNetworkStatusChange', res); if (res.isConnected) { setTimeout((...
2023-12-07 10:47:00
1077
原创 h5、app、小程序跳转外部链接的几种方式
H5、Windows中，跳转外部链接可以使用：1、window.location.href = 外部地址；// 兼容性最好2、window.open(外部地址)； // 此种方式在Safari浏览器中存在无法打开的情况APP中打开外部地址：1、plus.runtime.openWeb(外部地址)；// 内置浏览器打开网站2、plus.runtime.openURL(外部地址)； // ...
2023-12-06 17:36:00
1403
原创 关于Vue3中调试APP触发异常：exception:white screen cause create instanceContext failed,check js stack -> at use...
bug：reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->at useStore (app-service.js:2309:15)问题...
2023-12-01 17:53:00
2413
2
原创 uniapp引入高德地图或腾讯地图以及map在真机中常见问题汇总
以下是必须肯定会用到的官方地址腾讯地图API开发文档：微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)高德地图API开发文档：开发 | 高德地图API (amap.com)高德地图小程序配置指南：入门指南-微信小程序插件|高德地图API (amap.com)小程序后台：微信公众平台 (qq.com)有了这些地址，那么你就可以根据你的需要选择一个地图进行以下操作...
2023-07-07 17:38:00
1626
原创 uniapp微信小程序转支付宝小程序踩坑（持续更新）
首先第一个，真有被折磨到！// 微信正常使用，支付宝不行<image src="https://static.dabapiao.com/images/coupon-index.png" mode=""/>// 以下两种 微信、支付宝都正常使用<image src="https://static.dabapiao.com/images/coupon-index.png"...
2023-06-26 11:38:00
455
原创 Vue跨域详解
碰到这种问题，其实你的接口已经通了，但是在页面上就是访问不通过。你可以把API请求地址单独拎出来新开个网站打开看请求是否成功，成功，但是你的项目不通。有那么几个可能吧： 1、请求头设置错误headers = { 'Content-Type': 'application/json' //错误的 'Content-Type':'application/x-www-f...
2023-05-16 12:24:00
108
原创 Vue 打包后报 Uncaught SyntaxError: Unexpected token ‘＜‘
根本原因在于你的vue.config.js里的publishPath设置的路径是相对路径还是绝对路径大家都是看别人设置成 process.env.NODE_ENV==='production' ? './' : '/' 就原模原样照着复制粘贴其实无所叼谓，只需要设置成 '/' 不需要判断环境，默认就是根路径就行了。...
2023-05-16 09:35:00
413
原创 TypeError: Cannot read property 'upgrade' of undefined
解决方案：在你的.env.dev配置文件中配置VUE_APP_BASE_API并对target赋值
2023-04-23 17:56:00
110
原创 Vue选日期滚动条自动定位到选定的日期位置
html这里的关键点就是 :id="'scroll'+index" 以及:scroll-into-view="intoIndex"<view class="week-day-item" v-for="(item,index) in weekList" :key="index" @click="queryBus(item)" :id="'scroll'+index" ...
2023-03-28 15:11:00
155
原创 Vue根据时间戳制作倒计时15分钟
废话不多说直接上代码<script> export default { data() { return { downTimeShow: true, timer: null, downTime: '', no...
2023-03-27 14:13:00
215
原创 防抖节流utils
/** * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数 * * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */let timeout = null;const d...
2023-03-13 22:55:00
72
原创 一些JS过滤方法
一般过滤器我们都会卸载过滤filter文件内本文这里就直接写正常methods格式的 //过滤空格 filterSpaces(data) { return data.replace(/\s+/g, '') }, //验证是否为纯数字 isNumber(val) { var...
2022-10-08 10:28:00
85
原创 Vue全局公共服务类mixin
首先，简单介绍下mixin： Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类 Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂 在Vue中，mixin(混入)，提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。 本质其实就是一个js对象，它可以包含我们组件中任...
2022-10-08 10:23:00
86
原创 npm install报错node-sass@7.0.1 postinstall: `node scripts/build.js`
在控制台执行 即可npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
2022-06-16 13:48:00
305
原创 vue一直处在2.9.6版本卸载不了升级不了解决方案
直接win+R打开cmd窗口运行命令：输入where vue,找到vue安装位置，把找到的文件删掉再执行一次npm uninstall vue-cli -g，vue -V，已经没有版本号了此时就可以安装其他版本了npm install -g @vue/cli@3.12.1...
2022-06-08 19:32:00
90
原创 Error in nextTick: "TypeError: Right-hand side of 'instanceof' is not an object"
发生这种情况，直接去查看 props 对象是否 类型正确props 有 大概两种 写法吧， 一种就是对象形 ，一种是数组形// 对象形props: { show: { type: Boolean, default : () => false }, ...
2022-05-31 17:16:00
133
原创 Vue 全局避免按钮重复点击
这里用到的Vue.directive 自定义指令自定义指令是对普通DOM元素进行的底层操作，它是一种有效的的补充和扩展，不仅可以用于定义任何的dom操作，并且是可以复用的在 main.js 中写入以下代码// 避免按钮重复点击Vue.directive('preventReClick', { inserted(el, binding) { el.addEventListe...
2022-05-27 11:28:00
63
原创 Vue2 去除定时器之常用三种方式及特殊方式
一般情况去除定时器的常用的三种方式方法：创建一下三种钩子函数，一般有其中一个就足以实现清除定时器的效果beforeDestroy(){beforeDestroy(){ // 离开当前路由前的操作 clearInterval(timer) timer = null}destroyed(){ // 离开当前路由后的操作 clearInterval(timer) tim...
2022-05-16 11:04:00
524
原创 el-table自适应列宽
这里可对内容为文本的列进行自适应列宽以下为 工具方法/** * 使用span标签包裹内容，然后计算span的宽度 width： px * @param valArr */function getTextWidth(str) { let width = 0; // 创建 span 标签对象 并对该标签 插入 文本属性 及 类名 let html = document...
2022-05-13 16:44:00
135
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人