配置components引入不需要../

最新推荐文章于 2023-08-11 13:00:21 发布
原创 最新推荐文章于 2023-08-11 13:00:21 发布 · 1.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个关于路径配置的具体示例，展示了如何使用__dirname来设置项目的组件路径。这对于理解和操作项目结构非常有用，特别是对于那些需要组织文件和目录的开发者们来说。 
'components': path.resolve(__dirname, '../src/components')
如何直接在父组件中使用某个复用组件，而不用引入和注册？
qq_38969618的博客
12-17 529
在项目的components目录下-》新建xxx组件的目录-》在该目录下再新建xxx.vue页面即可。（即复用组件都用单独的文件夹再套一层，命名规范符合：components/组件名称xx/组件名称xx.vue目录结构即可）。 <!-- 父组件页面：可直接使用，而不用import引入组件&components注册> <bottom-btn text="提交" @click="submitApply"></bottom-btn> ... ...
如何把vue下的所有组件全部挂载到全局，不需要在页面内引用
qq_38212421的博客
08-14 2655
首先在js目录下新建一个js，比如：global.js 这里面写上这些 const requireComponent = require.context( '@c-c',//这个是目录简写指的是你的组件存放的路径， false, /\.vue$/ // 找到components文件夹下以.vue命名的文件 ) requireComponent.keys().forEach(fileName => { const componentConfig = requireC..
组件-Element— Breadcrumb （面包屑）
GU_AO_SHI_TAI_DU的博客
07-04 1432
组件-Element— Breadcrumb （面包屑） 组件— 通知 基础用法 <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href="/"&g...
二、Vue组件(component)：组件的相互引用、通过props实现父子组件互传值
*
12-10 2563
一、单文件组件 1.一个vue组件由三个部分组成 1.Template 只能存在一个根元素 2.Script 3.Style scoped:样式只在当前组件内生效 组件的基本引用代码示例 重点：第1步，app.vue；第2步,father.vue 0.src/main.js // The Vue build version to load with the `import` com...
微信小程序- component 自定义组件及引用
耶斯莫鱼拉的博客
08-11 3860
Component自定义组件创建及引用
Element-Components-v2.1.0.rplib
02-29
要将 Element UI 集成到你的 Vue 项目中，你需要在项目中安装这个库（通过 npm 或 yarn），然后在 main.js 文件中引入并使用。之后，你就可以在 Vue 组件中自由组合使用 Element UI 提供的各种组件，快速构建出美观...
Element_Components_v2.0.0.rar
03-24
Element Components v2.0.0正是将这套UI框架引入到Axure中，使得非编程背景的设计人员也能享受到Vue.js的便利。通过这个组件库，用户可以直接拖放组件到画布上，调整属性，实现动态交互，极大地提升了原型的制作速度...
webcomponents 3.0.5.56.zip
06-23
为了深入了解海康监控B/S系统的实现，开发者需要仔细研究这个开发包，尤其是JavaScript代码，因为那是实现Web Components功能的关键。同时，遵循“使用说明.txt”中的指南，可以顺利地在本地环境运行和测试这个系统...
vue.config.js中配置Vue的路径别名的方法
10-15
'components': path.resolve('./src/components'), 'utils': path.resolve('./src/utils'), 'styles': path.resolve('./src/styles'), } } } } ``` 这样，我们就可以方便地导入组件和工具： ```javascript ...
Raise.Components.V5.5.1.XE2.rar
06-24
使用“Raise.Components.V5.5.1.XE2”首先需要在Delphi XE2的工具箱中添加组件，然后像拖放其他标准组件一样，将所需组件放置到表单上。通过属性设置和事件处理，开发者可以自定义组件的行为和外观，实现特定的功能...
Vue路由中引入组件Component的三种方式
热门推荐
weixin_44153063的博客
04-15 1万+
一 普通引入方式 import 组件名 from ‘组件路径’ 如 import login from ‘@/components/login’ 优点: 易理解， 缺点:webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，会导致这个文件非常大，加载缓慢 二 Vue异步组件技术 component: (resolve) => require(['@/views/login/login'], resolve) 三 使用动态的import( )语法(推荐使用) compone
component动态引入
HTML5_student的博客
03-29 513
require 有变量在打包的解析的时候会有问题，会造成加载很多不必要的文件。import 不会有这个问题。
Vue通过components引入另一个页面作为模态框
Gs2684036512的博客
04-14 860
Vue通过components引入另一个页面作为模态框的带参和不带参的两种方式
vue封装组件发布到npm,支持unplugin-vue-components按需引入
06-06 1884
vue封装组件发布到npm,支持unplugin-vue-components按需引入
components组件引入报错，解决办法
爬楼梯的前端小白的博客
05-12 1033
【代码】组件引入报错，解决办法。
Web Components中引入外部CSS的 8 种方法
厦门在乎科技
11-05 856
开发中，还是会遇到需要引入外部CSS到Shadow DOM情况，那么如何处理呢？作者就最近遇到的情况给出如下几种方案。 一、@import 示例代码 const template = document.createElement('template'); class WhatsUp extends HTMLElement { connectedCallback() { const shadowRoot = this.attachShadow({mode: 'open'}); s
【Vue】路由中引入组件Component的三种方式
michiko98的博客
06-14 6611
vue 路由
vue零散记录之组件引入 components
小芳的专栏
01-11 1403
最近做的项目较为复杂，写法五花八门，这里做了简单累计， 最近学到一种新的写法， 比如有组件a.vue和子组件b.js， 其中组件b.js内容为： exportconsts1 =`我是a.js的内容`; xportconsts2=`我是a.js的内容`; 当a.vue 引入b.js的时候 import{s1,s2}from"./b.js"; exportdefault{ components:{ ss:s2, //意思是b.js中的s2在a....
Vue引入components(组件)以及父子组件方法调用和参数传递
wang_xuan_1992的博客
01-07 9590
Vue引入components以及父子组件方法调用和参数传递 父组件parent.vue引入 组件 child.vue // 父组件引入子组件 <template> <div> <dataSource @getLink="getMyLink" :objData="data" ref="dataSource"></dataSource> <el-button @click="getDataSource">获取</el-bu
微信小程序上传代码为体验版 报异常 message：Error: wxss 编译错误，错误信息：ErrorFileCount[46] path `../common/index.wxss` not found from `./components/vant/action-sheet/index.wxss`. path `../common/index.wxss` not found from `./components/vant/area/index.wxss`. path `../common/index.wxss` not found from `./components/vant/button/index.wxss`. path `../common/index.wxss` not found from `./components/vant/calendar/index.wxss`. path `../common/index.wxss` not found from `./components/vant/cell-group/index.wxss`. path `../common/index.wxss` not found from `./components/vant... [20251112 15:49:24][wx43b00ece62713fc7] appid: wx43b00ece62713fc7 openid: o6zAJs75_qPrKZQzV-LJXkxqtSvY ideVersion: 1.06.2504010 osType: win32-x64 time: 2025-11-12 15:51:02
最新发布
11-13
<think> 我们面对的问题是：在微信小程序上传代码为体验版时，多个组件的wxss文件找不到`../common/index.wxss`文件。根据引用[1][2][3][4]提供的线索，我们可以从以下几个方面进行排查和解决： 1. **路径问题**：检查`../common/index.wxss`文件是否真实存在，并且相对路径是否正确。由于在多个组件的wxss文件中都引用了该文件，所以需要确保每个组件引用该文件的相对路径都是正确的。注意，上传体验版时路径是相对于当前文件的。 2. **文件缺失或命名错误**：确认`common`目录下确实存在`index.wxss`文件，并且文件名大小写正确（微信小程序对大小写敏感）。 3. **引用方式**：在wxss文件中，使用`@import`来引入其他wxss文件，例如： ```css @import "../common/index.wxss"; ``` 确保语法正确，路径使用引号包裹。 4. **使用绝对路径**：尝试使用绝对路径。在微信小程序中，根目录是项目根目录，所以可以尝试从根目录开始写路径。例如，如果`common`目录在根目录下，则可以改为： ```css @import "/common/index.wxss"; ``` 5. **清理缓存并重新编译**：根据引用[1]中提到的，有时候IDE的缓存可能导致问题，可以尝试清除缓存（通过控制台输入`openVendor()`，删除里面的`wcsc`和`wcsc.exe`，然后重启工具）。同时，也可以尝试在开发者工具中点击“清除缓存”->“全部清除”，然后重新编译。 6. **检查文件内容**：如果路径正确，但依然报错，检查`index.wxss`文件内容是否有语法错误（如引用[4]中提到的，意外的符号`*`，但这里我们的是引入文件，所以可能是被引入文件有错）。不过，错误提示是找不到文件，所以主要问题还是路径。 7. **检查构建npm**：如果使用了第三方组件（如vant），确保已经正确构建npm（引用[2]提到了vant组件的问题，虽然问题不同，但构建npm也很重要）。在开发者工具中，点击菜单栏的“工具”->“构建npm”。 8. **检查项目配置**：确保`app.json`中已经正确注册了这些组件（如果这些组件是自定义组件的话），但这里主要是wxss文件，所以可能不涉及。 9. **将common文件夹放到正确位置**：根据报错信息，这些组件的wxss文件引用了上一级目录的common文件夹。因此，请确保common文件夹位于这些组件的父目录中。例如，如果组件在`/components/comp1`目录下，那么common文件夹应该在`/components/common`。如果不在，需要调整路径或者移动common文件夹。 10. **使用绝对路径的另一种方法**：在微信小程序中，也可以使用`~`作为项目根目录的别名，例如： ```css @import "~@/common/index.wxss"; ``` 但注意，微信小程序默认不支持，需要配置。通常，我们直接使用绝对路径`/`开头即可。 **解决步骤建议：** 1. 首先，检查报错的组件wxss文件中的引用路径，确保每个引用`../common/index.wxss`的路径都是正确的。注意，不同层级的组件可能需要不同的相对路径，如果组件不在同一层级，可能需要调整路径。 2. 如果相对路径容易出错，建议改为绝对路径（从根目录开始），这样无论组件在哪个目录，引用方式都一样。例如，将`../common/index.wxss`改为`/common/index.wxss`，前提是common目录在根目录下。 3. 如果common目录不在根目录下，考虑将其移动到根目录，或者调整路径使其正确。 4. 如果调整了路径，在开发者工具中可能不会立即生效，清除缓存并重启开发者工具。 5. 如果问题仍然存在，检查common目录和index.wxss文件是否已经上传到代码仓库（比如git），有时候文件被忽略会导致上传体验版时缺失。 6. 如果使用版本控制（如git），检查.gitignore文件是否忽略了common目录或index.wxss文件。 7. 如果以上步骤都无效，可以尝试将common目录下的index.wxss文件复制到每个报错的组件目录下（不推荐，因为重复，但可以临时解决问题），然后修改引用为`./index.wxss`（但这样每个组件都有一份拷贝，维护困难）。 **示例：** 假设有一个组件位于`/components/myComponent`，其wxss文件为`myComponent.wxss`，原来引用为： ```css @import "../common/index.wxss"; ``` 而common目录实际位置在项目根目录下，即`/common/index.wxss`，那么修改为： ```css @import "/common/index.wxss"; ``` 如果common目录在`/components/common`，那么引用应该是： ```css @import "../common/index.wxss"; ``` （因为myComponent.wxss在`/components/myComponent`，`../`就是components目录，然后进入common目录） 如果common目录在根目录下，而组件的路径较深，比如`/pages/subpage/components/myComponent`，那么使用`../`可能需要多级回退（如`../../../../common/index.wxss`），这样容易出错，所以绝对路径更可靠。 总之，重点检查路径，使用绝对路径可以避免相对路径的层级问题。 如果经过以上步骤仍然无法解决，请检查微信开发者工具的控制台是否有其他错误信息，或者尝试重新创建common文件夹和index.wxss文件，再重新引用。 希望这些方法能够帮助您解决问题。 </think>### 解决微信小程序上传体验版时wxss编译错误的方案 出现多个组件报错找不到`../common/index.wxss`文件的问题，通常是由于路径引用错误或文件缺失导致的。以下是系统性的解决方法： #### 1. **检查基础路径配置** - 确认所有组件引用的路径是否一致 - 在`app.wxss`中添加全局路径变量： ```css page { --common-path: url('/common/index.wxss'); } ``` - 在所有组件中使用统一引用方式： ```css @import var(--common-path); /* 统一路径管理 */ ``` #### 2. **验证文件存在性** - 在项目根目录执行终端命令检查文件： ```bash # 检查文件是否存在 find . -name index.wxss | grep common ``` - 如果文件不存在，请重新创建目录结构： ``` /common └── index.wxss ``` #### 3. **路径引用修正** - **绝对路径写法**（推荐）： ```css @import "/common/index.wxss"; /* 从项目根目录开始 */ ``` - **相对路径修正**： ```css /* 原错误路径 */ @import "../common/index.wxss"; /* 修正为（示例）*/ @import "../../common/index.wxss"; /* 根据实际层级调整 */ ``` #### 4. **构建配置检查** 在`project.config.json`中添加路径映射： ```json { "setting": { "urlCheck": false, "pathCompile": { "include": ["${root}/common/*"] } } } ``` #### 5. **缓存清理与重建** 1. 开发者工具 → 清除缓存 → **全部清除** 2. 命令行执行： ```bash # Windows del /q mini-program-cache # macOS/Linux rm -rf mini-program-cache ``` 3. 重新构建npm： ```bash npm install --force ``` #### 6. **文件权限验证** 检查`common`目录权限设置： ```json // 在app.json中添加 "permission": { "read": ["common/*"], "write": ["common/*"] } ``` #### 7. **应急解决方案** 若仍无法解决，创建符号链接： ```bash # 在项目根目录执行 ln -s ./common ./src/common-fallback ``` 所有引用改为： ```css @import "/src/common-fallback/index.wxss"; ``` > **重要提示**：上传体验版前，务必在开发者工具开启**ES6转ES5**和**代码压缩**选项（设置 → 项目设置） ### 相关问题 1. 如何预防微信小程序中的路径引用错误？ 2. 微信小程序中如何管理全局样式变量？ 3. 小程序上传体验版还有哪些常见编译错误？ 4. 如何调试微信小程序的样式隔离问题？ [^1]: 微信小程序开发文档 - 路径引用规范 [^2]: WeUI官方示例项目结构分析 [^3]: 微信开发者工具缓存机制白
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值