Engineering

路径别名

路径别名

在引入文件时,可以使用路径别名,以便更好的管理文件。

vite 中使用

安装

npm install @types/node --save-dev

vite config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src")
    }
  }
});

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

node 中使用

下载

npm i module-alias

package.json

{
  //else
  "_moduleAliases": {
    "@": "./"
  }
}

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./", //本文件的上一级路径设置为根路径
    "paths": {
      "@/*": [ "./*" ] //上一级文件夹设置为@
    }
  }
  "exclude": ["node_modules", "dist"] //webpack打包忽略这两个文件夹
}