网站首页编程语言正文

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

作者：weixin_44953227 更新时间： 2022-04-10 编程语言

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

使用 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/ 这个目录下的了


<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 Apptitle>
    <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>

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

上一篇：SpringBoot 导入插件报错 Cannot resol
下一篇：C#实现计算器功能_C#教程

网站首页 编程语言 正文

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

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

配置根目录访问

配置 build 打包路径

相关推荐

网站首页编程语言正文