react中设置短链接

原因
比如，我page要引入一个页面，那么引入起来就很麻烦。
图片在src\assets\img\login\bg.jpg
组件在src\pages\login\index.tsx
引入代码如下：

import React from 'react';
import style from './style.less';
import bg from '../../assets/img/login/bg.jpg';

const Login = () => {
  return (
    <div className={style.Login}>
      <img src={bg}></img>
    </div>
  );
}

export default Login;

 

设置短链接
其实这是利用webpack的功能alias。
运行npm run eject暴漏webpack的配置文件config/webpack.config.js
全局搜索alias: { 然后添加，如下配置：

alias: {
  '@assets':path.join(__dirname,'..','src/assets')
   ...
},

 

如果是vite项目，则在vite.config.js中如下配置即可

?

1 2 3 4 5 6 7 8 9 10 11 12

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

　　

 

 

 

新办法引入图片

import bg from '@assets/img/login/bg.jpg';

 或者在css中使用

 background-image: url("~@assets/img/login/bg.jpg");

 

注意

如果在ts中用短连接，或许还会识别不到，这个时候需要在tsconfig.json>compilerOptions中，再次额外添加你的配置别名项就好

"baseUrl": "./",
"paths": {
    "@api/*": ["src/api/*"],
    "@redux/*": ["src/redux/*"],
    "@assets/*": ["src/assets/*"] 
 },

 

提供一分完整的tsconfig.json供你参考

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@api/*": ["src/api/*"],
        "@redux/*": ["src/redux/*"],
        "@assets/*": ["src/assets/*"]
       
    },
    "experimentalDecorators": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}