日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React react-cli 簡單配置根目錄和build打包訪問路徑

作者：weixin_44953227 更新時間： 2022-04-10 編程語言

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

使用 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/ 這個目錄下的了

    
<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

相關推薦

欄目分類
最近更新