React react-cli 简单配置根目录和build打包访问路径

电玩女神 2021-09-21 13:22 366阅读 0赞

#### 配置之前需要把配置文件暴露出来 ####

使用 eject 暴露配置文件, 注意这个操作不可逆

npm run eject

#### 配置根目录访问 ####

1.  配置文件暴露出来之后, 找到 `config/webpack.config.js` 文件
2.  在 `webpack.config.js` 文件中找到 `alias` 配置
3.  添加 `'@': path.resolve('src'),` 或者 `'@': path.join(__dirname,'../src'),` 都可以
    
        alias: { 
          '@': path.resolve('src'), // 配置根目录访问
          // 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 || { }),
        },
4.  如果配置完之后使用@/还是报错找不到文件, 就重新 npm start

#### 配置 build 打包路径 ####

> 打包的时候默认是 ./ 访问, 部署的时候会有问题

1.  找到 `package.json` 文件
2.  添加 `homepage: /xxx/`
    
        { 
          "name": "antd-demo",
          "version": "0.1.0",
          "homepage": "/gf_doc/",
          "private": true,
          "dependencies": { ...
          }
         }
3.  npm run build 打包之后的文件就是访问 `/gf_doc/` 这个目录下的了
    
        <!doctype html>
        <html lang="en">
        
        <head>
            <meta charset="utf-8" />
            <link rel="icon" href="/gf_doc/favicon.png" />
            <meta name="viewport" content="width=device-width,initial-scale=1" />
            <meta name="theme-color" content="#000000" />
            <meta name="description" content="Web site created using create-react-app" />
            <link rel="apple-touch-icon" href="/gf_doc/logo192.png" />
            <link rel="manifest" href="/gf_doc/manifest.json" />
            <title>React App</title>
            <link href="/gf_doc/static/css/2.6f338a1f.chunk.css" rel="stylesheet">
            <link href="/gf_doc/static/css/main.d353c195.chunk.css" rel="stylesheet">
        </head>
        
        <body><noscript>You need to enable JavaScript to run this app.</noscript>
            <div id="root"></div>
            <script src="/gf_doc/static/js/2.b7960b6d.chunk.js"></script>
            <script src="/gf_doc/static/js/main.bf67b40c.chunk.js"></script>
        </body>
        
        </html>