reactjs - react.js - 使用自定义路径运行 npm run build
问题描述
在项目上运行npm run build
命令react-create-app
会在所有文件(如地图文件)中创建一个构建文件夹和一些默认路径:
{"version":3,"sources":["../static/js/main.500cb0d9.js" ...
我可以更改构建文件夹中的所有路径以匹配我的 BE,例如
{"version":3,"sources":["mywebsite/web/static/js/main.500cb0d9.js" ...
包.json:
{
"name": "reactTest",
"version": "0.1.0",
"private": true,
"dependencies": {
"jquery": "^3.3.1",
"moment": "^2.22.1",
"react": "^16.4.1",
"react-datepicker": "^1.5.0",
"react-dom": "^16.4.1",
"react-month-picker": "^1.3.7",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
解决方案
您可以使用以下两种方法之一设置根路径,以便在生产环境中为您的 React 应用程序提供服务:
1. 通过在package.json文件中设置主页属性
注意第 5 行:
{
"name": "reactTest",
"version": "0.1.0",
"private": true,
"homepage": "mywebsite/web",
"dependencies": {
"jquery": "^3.3.1",
"moment": "^2.22.1",
"react": "^16.4.1",
"react-datepicker": "^1.5.0",
"react-dom": "^16.4.1",
"react-month-picker": "^1.3.7",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
(见文档)
2. 使用 PUBLIC_URL 环境变量
运行构建作业时,在其前面添加 env var,如下所示:
PUBLIC_URL=mywebsite/web npm run build
(见文档)
它有什么作用?
这些方法不会更改源映射文件中的路径,它们始终是相对的,但它可以让您使用您选择的绝对路径将 React 应用程序部署到 Web 服务器。
根据您设置的值,它将导致在生成的index.html中包含 JavaScript 和 CSS 包的路径是绝对的:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="mywebsite/web/manifest.json">
<link rel="shortcut icon" href="mywebsite/web/favicon.ico">
<title>React App</title>
<link href="mywebsite/web/static/css/main.c17080f1.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="mywebsite/web/static/js/main.dbfd0e89.js"></script>
</body>
</html>
推荐阅读
- java - Java:Threadpoolexecutor - 使用作业列表提交作业?
- laravel - 带有 Socket/Redis 的 Laravel - 私有通道路由不起作用
- android - 多布局基础语言环境 - Android
- javascript - 无法将获取的数据推送到全局数组中的函数
- slack-api - 当机器人在松弛的交互式消息中替换消息时如何禁用自动滚动?
- knockout.js - 有没有办法使用 KnockoutJS 将 XML 文件转换为 CSV?
- asp.net - 无法在 C# windows 窗体中创建新的子窗体
- tensorflow - 如何运行 TensorFlow 聚类算法模型
- ios - 预计解码 Int 但找到了一个数字
- python - 有效地返回数组中第一个满足条件的值的索引