Vue+TS项目配置别名的正确姿势

概要

使用别名需要配置两个地方：

• 一个是打包工具的配置，告诉打包工具打包时如何解析别名；
• 一个是ts解析的配置，告诉ts编译器如何解析别名；
  ts解析如果不配置，在本地开发时lint工具会报错，可以使用"// @ts-ignore"取消语法检查，不影响打包上线，但必须要配置打包时的解析

配置打包工具的解析

• 使用vue-cli脚手架，在vue.config.js中添加以下配置项

configureWebpack: {
    resolve: {
        alias: {
            // 此处配置别名和实际对应路径的映射
            '@': path.resolve(__dirname, 'src/')
            '@utils': path.resolve(__dirname, 'src/utils/')
        }
    }
}

• vite项目，在vite.config.js中添加以下配置项

resolve: {
    alias: {
        "@": path.resolve(__dirname, "src"),
        "@utils": path.resolve(__dirname, "src/utils/"),
    }
},

配置ts的解析

在tsconfig.json中添加以下配置项

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