项目中为什么要设置alias

• 项目中会设置alias（别名），避免通过…/…/导入
• 打包效率增加，避免自己找错文件层级
• ctrl+鼠标左键点击导入文件路径中带别名的
  • 项目中，ctrl+鼠标左键点击导入文件路径中带别名的，会识别不出来，没有快捷跳转
    • import baseDiaLog from ‘components/baseDiaLog.vue’

Vue项目快捷跳转

• 在vue.config.js中

    chainWebpack: config => {
        config.resolve.alias
        .set('@', resolve('src'))
        .set('assets', resolve('./src/assets'))
        .set('components',resolve('./src/components'))
    }

JavaScript 项目快捷跳转

• 可以在根目录加一个jsconfig.json文件
• 然后重新加载 VSCode：
  • 在做出配置变更后，您可能需要重启 VSCode 或重新加载窗口才能使更改生效。您可以通过按下 Ctrl+Shift+P（或 Cmd+Shift+P 在 Mac 上）打开命令面板，然后输入 “Reload Window” 来重新加载窗口。

  {
    "compilerOptions": {
      "target": "ES6",
      "jsx": "react",
      // 基础目录作为项目根目录, 这应该指向包含 `src` 目录的路径
      "baseUrl": "./",
      "paths": {
        // @ 作为 src目录别名
        "@/*": ["src/*"], // VS Code 将 `@` 解析为 `src` 目录
        "assets/*": ["src/assets/*"],
        "components/*": ["src/components/*"]
      }
    },
    "exclude": ["node_modules", "dist"], // "...其他要排除的目录"
    "include": ["src/**/*"]
  }
  

TypeScript 项目快捷跳转

• 根目录tsconfig.json

  {
    "compilerOptions": {
      "paths": {
        "@/*": ["./src/*"]
      }
    },
    "include": ["./src"]
  }
  

Webpack打包识别别名

• webpack.config.js（Webpack 的别名配置仅对构建过程有效）

  const fs = require('fs');
  const path = require('path');
  
  // 获取当前工作目录（项目根目录）
  const appDirectory = fs.realpathSync(process.cwd());
  
  // 解析相对于项目根目录的路径
  const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
  
  // 定义 src 目录的绝对路径
  const appSrc = resolveApp("src");
  
  module.exports = function (webpackEnv) {
  	return {
  		resolve: {
  			alias: {
  	        "react-native": "react-native-web",
  	        ...(isEnvProductionProfile && {
  	          "react-dom$": "react-dom/profiling",
  	          "scheduler/tracing": "scheduler/tracing-profiling",
  	        }),
  	        ...(modules.webpackAliases || {}),
  	        // 增加别名
  	        "@": appSrc,
  	      },
  		}
  	}
  

Vscode中下载插件

• vscode《别名路径跳转》插件
  • 在设置.json中加
    • 设置按ctrl+shift+p，打开设置，右上角点击设置icon（折页的纸张）

      // alias
      "alias-skip.allowedsuffix": ["js", "vue", "jsx", "ts", "tsx"],
      "alias-skip.rootpath": "package.json",
      "alias-skip.mappings": {
        "@react-page": "/packages/react-page/src",
        "@vue-page": "/packages/vue-page",
        "@": "/src", // 默认只有`@`映射，映射到`/src`，你可以添加更多映射，映射路径必须以`/`开头
        "components": ["/src/components"],
        "assets": ["/src/assets"]
        // ...更多映射关系
      },