- 配置引用路径(以“@”引用为项目的src目录为例)可拆分为如下两步操作
- 配置webpack打包时将“@”解析为项目的src目录
- 配置vsCode在路径中输入“@”时的路径提示
- 本贴着重讲解“配置webpack打包时将‘@’解析为项目的src目录”的操作和溯源
- 操作
- 在项目根目录的vue.config.js文件中做如下配置
const path = require('path') module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src') } } } }
-
说明:如果没有这段配置但引用路径“@”依然生效,则是环境内置了这段配置。
- 在项目根目录的vue.config.js文件中做如下配置
-
溯源
-
来到Vue CLI官网(webpack 相关 | Vue CLI),我们可以找到如何通过“简单的方式”配置webpack的说明。
-
继而来到webpack官网(解析(Resolve) | webpack 中文文档),在resolve配置项中alias关键字的配置中,找到了关于“创建
import
或require
的别名”的配置的说明。 -
综合以上两处文档,可以溯源“配置webpack打包时将‘@’解析为项目的src目录”的语法出处。
-
- 操作
-
关于如何“配置vsCode在路径中输入‘@’时的路径提示”
-
可以参考这篇帖子——vsCode配置import@路径提示_SunnyRun-CSDN博客
-
-
特别提醒:在样式中使用引用路径时,前面需要加“~”
-
示例代码
<style lang="less" scoped> @import "~@/styles/variables.less"; .test { background: url('~@/assets/images/logo.png') } </style>
-
溯源
-
在less官网(Less 快速入门 | Less.js 中文文档 - Less 中文网),可以找到关于引入less文件的语法出处,但并未发现有关使用引用路径前面需要加“~”的说明。
-
继而来到Vue CLI官网(CSS 相关 | Vue CLI),找到了使用引用路径时需要在路径前加上“~”的相关说明。
-
但其实,这个规则从根本上了来讲,由webpack官网(less-loader | webpack 中文文档)的less-loader部分文档决定,因为Vue CLI的打包功能是由webpack实现的。
-
-
如何在vue项目中配置引用路径“@”
最新推荐文章于 2024-07-17 16:24:39 发布