vue和react，配置路径别名

vue配置@作为src

1. 先在vscode扩展中找到插件 Path Intellisense并安装
2. 配置Path Intellisense
   1. 在vsCode 加粗样式文件—> 首选项—> 设置—>工作区—> 扩展—>Path Intellisense

2. 进入settings.json配置文件

{
    "editor.fontSize": 18,
    "editor.tabSize": 2,
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    }
}

3. 在项目根目录下，创建jsconfig.json文件

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

react中配置src 为 src

1. 在文件webpack.config.base.js

resolve: { 
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'], 
    modules: [path.join(__dirname, '../../src'), 'node_modules'], 
    + alias: { 'src': path.resolve(__dirname, "../../src") //src文件夹路径，注意这个src前面的../别写错了，根据自身的位置添加../ 
    } 
},

2. 在tsconfig.js配置

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

或者直接在tsconfig.js配置

{
    "compilerOptions": {
        "baseUrl": "src"
     },
     "include": ["src"]
}

官网地址：create-react-app.dev/docs/import… sass中导入地址要在地址前加上~

.login {
    background: url('assets/login.png') // ❌
    background: url('../../assets/login.png') // ✅
    background: url('~assets/login.png') // ✅
}