文章目录
- 📋前言
- ⏬关于专栏
- 🎯运行拷贝的新项目
- 🎯关于报错：sass 依赖问题与代码报错
- 🧩解决方法
- 🧩补充（关于 /deep/ 和 ::v-deep）
- 📌区别
- 🧩意外情况
- ❗注意
- 📝最后
📋前言
这篇文章的内容记录一下在运行 uni-app 项目的时候遇到的报错，以及解决报错的过程。报错原因是，拷贝新项目，在另一台电脑运行时出现的依赖报错，以及运行到微信开发者工具出现的报错等等。
⏬关于专栏
本篇文章是我的 uni-app 专栏的第二篇文章，这个专栏主要是分享和介绍从零到一学习和使用的 uni-app 的笔记和个人经验。通过个人的学习经验和工作经验来给大家分享关于 uni-app 开发的技巧，以及快速入门的诀窍等等。
🎯运行拷贝的新项目
凡事都有因果，首先我们来看下报错是如何生成的，以及分析为什么会出现这种报错的原因。首先在编译器（hbx）运行项目（项目以测试项目为名称），选择运行在微信开发者工具。运行后出现如下报错。
我们从报错第一条开始看，可以发现报错的原因是 sass 的版本依赖问题。
接下来针对这个报错，我们一步一步来解决这个报错，以及后续出现的报错。
🎯关于报错：sass 依赖问题与代码报错
首先我们可以看到运行到微信开发者工具后，并没有运行成功，而是出现了依赖问题的报错，如上图。其实很明显，我们看项目的目录，发现并没有 node_modules 这个依赖文件。出现这个原因只能说是粗心的原因了，通过窗口的报错可以发现是 sass 的依赖问题，一开始还认为是 sass 的版本问题，但是项目中根本没有 sass 的依赖。
接下来，打开编译器的终端，安装相关依赖和 node_modules 包，使用如下的命令。
npm install node-sass
我们可以看到项目目录中出现了 node_modules 包，以及终端窗口开始下载了。安装完成之后，我们重新运行到微信开发者工具。但是项目还是出现了运行报错，说明还有在代码上的报错问题，我们仔细看下图的报错信息，是因为项目中的部分代码的报错导致的。（项目在原电脑运行正常）
🧩解决方法
全局搜索项目中的 /deep/ 然后全部替换成 ::v-deep 即可解决。
然后再次运行，我们可以发现之前的报错没有出现了，说明问题解决了，运行窗口出现编译启动的消息提示了。
然后我们可以发现微信开发者工具打开了，并且运行了该项目，说明 uni-app 项目成功运行到微信开发者工具了。
🧩补充（关于 /deep/ 和 ::v-deep）
/deep/ 和 ::v-deep 都是用于处理深度选择器（deep selector）的语法，用于在 Vue 组件中修改子组件中的样式。它们的主要作用是能够穿透子组件的 Shadow DOM 或者普通的组件边界，从而修改子组件中的样式。
📌区别
/deep/：这是旧版本的深度选择器语法，在 Vue 2 中使用。
::v-deep：这是 Vue 3 推荐使用的新版本深度选择器语法。它是为了取代 /deep/ 而引入的，并且可以达到相同的效果。使用 ::v-deep 可以更好地表达出你正在处理的是 Vue 组件的深度样式。
使用场景：
- 当你需要在父组件中修改子组件的样式时，可以使用深度选择器语法。
- 当子组件的样式被封装在组件作用域内，而你又需要修改子组件中的样式时，深度选择器就非常有用。
需要注意的是，在使用深度选择器时，要慎重考虑对子组件样式的修改，确保修改不会破坏组件的封装性和复用性。通常情况下，应该优先通过 props 或者事件来与子组件进行交互，而不是直接修改其样式。
🧩意外情况
如果运行成功后，弹出了微信开发者工具，但是没有打开运行的项目，说明还存在一些配置要处理。首先我们要从头开始排查是否缺漏了 uniapp 运行微信小程序准备操作。
- 首先要打开manifest.json获取uni_appId。
- 然后要打开微信开发者工具中的服务端口。
- 然后还要在 Hbuilder 中配置微信开发者工具的路径。
- 最后也是最重要的，查看运行的项目是否配置了 appid。
❗注意
然后说回，弹出了微信开发者工具，但是没有打开运行的项目这个特殊情况。原因是在于 appid 的问题，在运行其他人的项目或者在新电脑运行的时候，我们要把编译器上面配置好的 appid 先清空，然后再去运行，以游客身份的启动微信开发者工具，这样就可以解决这个问题了（亲测有效）。如果后续需要加上 appid 来开发，直接填上，在运行就没有这个问题了。
