React alias 别名模块配置

最新推荐文章于 2025-06-14 14:46:37 发布

爱开车的彬哥

最新推荐文章于 2025-06-14 14:46:37 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue/React/Angular

本文链接：https://blog.youkuaiyun.com/Ruffaim/article/details/108675060

Vue/React/Angular 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用create-react-app创建的项目如何配置别名，包括如何通过npm run eject释放配置文件，以及如何设置别名以便更好地支持React Native Web及提高React DevTools的性能。此外，还对比了Vue CLI 3中别名的配置方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该配置适用于由 create-react-app 脚手架构建的项目，找不到 webpack.config.js 需要先 npm run eject 释放配置文件

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',
        }),
        ...(modules.webpackAliases || {}),
        "@":path.resolve(__dirname,'../src')
      },

import '@/style/index.css';
import App from '@/pages/App';

与vue cli 3 脚手架配置别名对比

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  lintOnSave: true,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@assets',resolve('src/assets'))
  }
};