如何在vue项目中配置引用路径“@”

配置引用路径（以@引用为项目的src目录为例）可拆分为如下两步操作配置webpack打包时将@解析为项目的src目录配置vsCode在路径中输入@时的路径提示本贴着重讲解“配置webpack打包时将@解析为项目的src目录”的操作和溯源操作在项目根目录的vue.config.js文件中做如下配置const path = require('path')module.exports = {config

凡尔赛学院

17992人浏览 · 2021-09-11 20:30:05

凡尔赛学院 · 2021-09-11 20:30:05 发布

配置引用路径（以“@”引用为项目的src目录为例）可拆分为如下两步操作
- 配置webpack打包时将“@”解析为项目的src目录
- 配置vsCode在路径中输入“@”时的路径提示
本贴着重讲解“配置webpack打包时将‘@’解析为项目的src目录”的操作和溯源
- 操作
  - 在项目根目录的vue.config.js文件中做如下配置
```
const path = require('path')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}
```
  - 说明：如果没有这段配置但引用路径“@”依然生效，则是环境内置了这段配置。
- 溯源
  - 来到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实现的。