2. 程式人生 > 其它 >create-react-app 打包設定homepage，資源引入使用相對目錄

create-react-app 打包設定homepage，資源引入使用相對目錄

阿新 • • 發佈：2021-01-31

技術標籤：react、antDesigin、dva、mobx

文章參考

  1. CREATE-REACT-APP 建立專案 HOMEPAGE 配置主機名不生效
  2. create-react-app專案打的包如何修改資源根目錄

問題描述

前端打包好之後放到springboot工程static目錄中，springboot 用了JWT做許可權管理，但是訪問到打包的index.html檔案之後，頁面不顯示內容，究其原因是因為引入的靜態資源不對，返回404，導致頁面沒有顯示出來

分析原因

根據404,檢視靜態資源的路徑，發現是因為打包使用了’/’ 根目錄，springboot 又帶了“工程名”上下文，導致瀏覽器找不到靜態資源

解決辦法

  1. 新增工程名，使用絕對路徑
  2. index.html 使用相對路徑引入 js 等其他靜態資源

給package.json檔案新增 homepage

"homepage": ".",

相關推薦

create-react-app 打包設定homepage，資源引入使用相對目錄

技術標籤：react、antDesigin、dva、mobx 文章參考 CREATE-REACT-APP 建立專案 HOMEPAGE 配置主機名不生效create-react-app專案打的包如何修改資源根目錄

使用create-react-app 搭建一個專案，並引入antd

使用create-react-app 搭建一個專案，並引入antd 1、我已經安裝了node和npm，檢視版本用node -v和npm -v

執行react專案，npm run start/build, 報錯 There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally.

如題：這個問題困擾了我半天，網上搜索各種解決方法，都沒能解決，最後仔細讀一遍原因才發現問題很簡單，就是版本不一致

create-react-app : X:\Users\youd\AppData\Roaming\npm\create-react-app.ps1， 因為在此係統上禁止執行指令碼

如果你是第一次用腳手架搭建react專案，可能會報以下錯誤。 create-react-app : 無法載入檔案 X:\\Users\\youd\\AppData\\Roaming\\npm\\create-react-app.ps1， 因為在此係統上禁止執行指令碼。有關詳細資

create-react-app 設定檔案路徑別名

使用 eject 擴充套件 webpack 前言 本文基於 (“react”: “^16.13.1”) 版本 react官方腳手架預設是將webpack配置隱藏起來了，在進行配置之前需要將webpack給暴露出來。

npx create-react-app xxx建立專案報錯的解決辦法

手頭有一臺大學時代的Windows電腦，它此前沒有裝過create-react-app，只裝了node環境。版本資訊：node -> 10.16.3，npm -> 6.9.0。前幾日閒的無事想給它裝個React，結果失敗了，報了錯，所以有了下面這出。

windows下create-react-app 升級至3.3.1版本踩坑記

電腦原先使用npm install -g create-react-app命令全域性安裝過，根據文件先全域性解除安裝npm uninstall -g create-react-app，然後採用npx create-react-app my-app建立專案。然而，專案建立完後，卻只生成了nod

用腳手架 create-react-app 搭建 react 專案及各種元件庫的安裝

配置及安裝方式： 1.搭建react：npxcreate-react-appmy-app（my-app自己起的檔名，如果一直安裝失敗，試著清一下快取：npmcacheclean--force）

create-react-app中的babel配置探索

版本 babel-loader version:"8.1.0" create-react-app:"3.4.1" 三個配置 第一部分：

Create-React-app專案首屏載入優化（二）--CDN加速

之前，通過gzip的方式將訪問速度從40多秒減少到7秒左右，但是仍然很慢。傳送門

使用create-react-app 構建react應用(react-scripts)

前言: create-react-app 是一個全域性的命令列工具用來建立一個新的專案 react-scripts 是一個生成的專案所需要的開發依賴

解決create-react-app在ie中開啟頁面空白的相容性問題

最近使用react官方腳手架create-react-app建立專案的時候發現在ie瀏覽器開啟時顯示空白，在主流的chrome、fireFox等瀏覽器顯示是正常的。開啟控制檯顯示如下

解決React腳手架create-react-app中不能使用less問題

React腳手架create-react-app不支援less，因此需要配置webpack的webpack.config.js檔案。 在使用React腳手架的時候，可能發現是沒有webpack.config.js檔案的。執行npm run eject，會多出兩個目錄config和scripts，此

create-react-app配置less

less的配置過程【 配置檔案是抽離的 】 create-react-app建立專案 npm run eject 暴露配置項

create-react-app搭建安裝步驟

注意： Node >= 8.10npm >= 5.6 1.安裝nodejs 首先要安裝nodejs，可以直接到node官網下載安裝。

create-react-app新增對TypeScript支援

背景 最近一直在重構react專案，由於專案歷史原因，將之前parcel打包工具換成了webpack，並選擇了使用create-react-app作為專案開發腳手架。

create-react-app eject 之後 配置less

在 //stylefilesregexes下新增如下兩個常量 constlessRegex=/\\.less$/; constlessModuleRegex=/\\.module\\.less$/;

使用create-react-app 搭建react + ts + antd框架

一、建立專案 使用npx create-react-app (專案名) --template typescript建立專案 　　①如果App.tsx檔案有如下報錯: （沒有報錯的請忽略）

create-react-app從一個新專案到一個請求

　　最近在學習react，想著畫些小頁面練練手，於是就想著拿些酷狗的api呼叫玩玩。

create-react-app 專案搭建

1、全域性安裝(4.0.1) npm i -g create-react-app 檢視版本號：create-react-app -V 2、建立新專案