前端项目文件别名的配置

阅读目录

• 前言
• 配置

回到顶部

前言

项目里配置别名路径是写项目时的常见操作。好处在于：

1. 简化模块路径。在项目中，有些文件可能存在于深层目录中，并且需要多次引用。如果每次都使用相对路径进行引用，就会显得非常麻烦。而通过在项目中配置 @ 别名路径，就可以将这些深层目录的路径简化为一个别名，在代码中更加清晰和简洁。

2. 提高重构效率。在项目中经常需要对文件进行重构，比如将某个组件从一个目录下移动到另一个目录下。如果没有使用别名路径进行引用，那么就需要在所有引用该组件的地方都进行路径修改，这是非常费时费力的。而若使用别名路径，则只需在别名路径的配置中修改即可。

3. 便于维护。在一个大型项目中，会存在很多共用的组件、工具类等资源，这些资源往往需要在不同的地方进行引用。如果不使用别名路径，就可能出现遗漏引用或者重复定义等问题。而使用别名路径可以避免这些问题，统一管理项目中的共用资源，在代码中也容易进行识别和维护。

原文链接：https://blog.csdn.net/weixin_42373175/article/details/130953352

回到顶部

配置

修改webpack.config.js

module.exports = {
  // webpack解析模块加载选项
  resolve: {
    // 配置文件别名
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'components': path.resolve(__dirname, '../src/components'),
      'utils': path.resolve(__dirname, '../src/utils')
    },
  },
}

编辑器识别

编辑器并不会自动识别别名，你也需要在项目中根目录下添加一个 jsconfig.json（或 tsconfig.json）文件，并在其中配置别名。

{
  "compilerOptions": {
    "baseUrl": "./", // 根路径
    "paths": {
      // 路径映射，与 baseUrl 关联
      "@": ["src/*"],
      "src/*": ["src/*"],
      "components/*": ["src/components/*"],
      "utils/*": ["src/utils/*"]
    },
  }
}

使用别名

import Home from "src/pages/Home";