让node运行时可以识别

1. 下载可识别依赖包

 cnpm i module-alias @types/module-alias --save-dev

   2. 项目的入口文件中添加以下代码：

  require('module-alias/register')

 3. 接着，在 package.json 文件中添加别名配置：

{
  "name": "pdf",
  "version": "1.0.0",
  "description": "",
  "_moduleAliases": {
    "@app": "app",
    "@components": "components",
  }
}

让vscode识别别名

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

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@app/*": ["app/*"],
      "@components/*": ["components/*"],
    }
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

打包时识别别名

在webpack.config.js内添加

module.exports = {
  resolve: {
    extensions: ['.js'],
    alias: {
      // 别名设置
      '@app': path.resolve(__dirname, 'app'),
      '@components': path.resolve(__dirname, 'components'),
    },
  },
  
};