Vue中快捷路径的设置(src的别名)

我们在vue在组件中以及js文件中经常会应用src目录下的一些文件或者资源,最常见的办法就是一层一层的../../去转出文件夹寻找所需资源所在的路径。

可以通过设置一个标识来代表src目录 之后需要到src目录下应用资源书写路径可以直接通过标识/来查询 下列就是设置代码:

我们首先新建一个文件根目录下新建一个文件jsconfig.json  在内写以下代码:
 

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

如果需要在css的样式中也要使用标识 需要在前面加个~符号 例如: ~@ (此处@作为src标识符)

Vue 3项目的配置,使用路径别名(alias)是为了简化路径引用,特别是在大型项目避免硬编码相对或绝对路径。如果你遇到路径别名报错,可能是由于以下原因: 1. **字符编码问题**:确保你的`vue.config.js`文件以及包含路径别名的文件使用的是UTF-8无BOM编码,因为非UTF-8可能会导致路径解析错误。 ```javascript module.exports = { chainWebpack: config => { config.resolve.alias.set( // 使用反斜杠(\)而不是正斜杠(/)表示路径 '@assets': resolve('src/assets'), '@components': resolve('src/components'), '@views': resolve('src/views') ); }, }; ``` 确保`resolve()`函数内的字符串使用正确的转义字符。 2. **路径映射配置错误**:检查路径别名是否正确指向了实际的目录,例如路径别名是否指到了源码的某个文命名文件夹。 3. **Webpack版本兼容**:Vue CLI 3.x 和 Vue 3 项目的默认配置对webpack别名的处理有所不同,确保使用的Vue CLI版本支持路径别名功能。 4. **ES模块和CommonJS冲突**:如果既有`.js`又有`.ts`文件,需要确保你的构建配置正确地处理了模块导入,可能需要设置`esModuleInterop`和`resolve.symlinks`选项。 5. **Node环境问题**:在某些运行环境,如Windows,文件路径可能需要额外处理,你可以试试`path.posix`模块来进行规范化。 解决完上述问题后,通常可以尝试重启开发服务器或清除浏览器缓存再查看效果。如果问题依然存在,提供具体的错误信息会有助于更准确地定位问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值