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

最新推荐文章于 2023-07-17 17:41:45 发布

weixin_44953227

最新推荐文章于 2023-07-17 17:41:45 发布

阅读量7.9k

点赞数 1

分类专栏： JavaScript 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/weixin_44953227/article/details/110489634

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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

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

npm run eject

配置根目录访问

配置文件暴露出来之后, 找到 config/webpack.config.js 文件
在 webpack.config.js 文件中找到 alias 配置

添加 '@': 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 || {}),
},

如果配置完之后使用@/还是报错找不到文件, 就重新 npm start

配置 build 打包路径

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

找到 package.json 文件

添加 homepage: /xxx/

{
  "name": "antd-demo",
  "version": "0.1.0",
  "homepage": "/gf_doc/",
  "private": true,
  "dependencies": {...
  }
 }

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>

weixin_44953227

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
React react-cli 简单配置根目录和build打包访问路径

配置之前需要把配置文件暴露出来使用 eject 暴露配置文件, 注意这个操作不可逆npm run eject配置根目录访问配置文件暴露出来之后, 找到 config/webpack.config.js 文件找到 alias 配置添加 '@': path.resolve('src'), 或者 '@': path.join(__dirname,'../src'), 都可以alias: { '@': path.resolve('src'), // 配置根目录访问 // Sup
复制链接

扫一扫