Its*_*has 7 reactjs npm-run npm-scripts react-create-app
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" ...
的package.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
(见文件)
它有什么作用？
这些方法将不会改变的路径在源地图文件,那些永远是相对的,但它会帮助您部署应用程序做出反应到你的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>
| 归档时间： |
|
| 查看次数： |
4097 次 |
| 最近记录： |