vue/react ts/js项目 alias 文件路径映射

一、配置

// webpack.config.js
alias: {
  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
  // Allows for better profiling with ReactDevTools
  ...(isEnvProductionProfile && {
    'react-dom$': 'react-dom/profiling',
    'scheduler/tracing': 'scheduler/tracing-profiling',
  }),
  '@': path.resolve(__dirname, '../src/'),
  ...(modules.webpackAliases || {}),
},

//tsconfig.json:
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./", // 主要是这两个地方要设置
    "paths": { // 主要是这两个地方要设置
      "@/*": ["src/*"] 
    }
  },
  "include": [
    "src"
  ],
}

二、应用

// App.tsx
import './App.css';
import dashboard from "@/components/dashboard";
function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;