Reactjs react.js-使用自定义路径运行npm运行构建
在Reactjs react.js-使用自定义路径运行npm运行构建,reactjs,npm-scripts,npm-run,react-create-app,Reactjs,Npm Scripts,Npm Run,React Create App,在react create appproject上运行npm run build命令会在所有文件(如地图文件)中创建一个生成文件夹和一些默认路径: {"version":3,"sources":["../static/js/main.500cb0d9.js" ... 我可以更改build文件夹中的所有路径以匹配我的BE吗 {"version":3,"sources":["mywebsite/web/static/js/main.500cb0d9.js" ... package.json: {
react create app
project上运行npm run build
命令会在所有文件(如地图文件)中创建一个生成文件夹和一些默认路径:
{"version":3,"sources":["../static/js/main.500cb0d9.js" ...
我可以更改build文件夹中的所有路径以匹配我的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。使用公共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>
反应应用程序
您需要启用JavaScript才能运行此应用程序。
检查这个帖子的永久解决方案,我相信这是最好的
方便的方法:
为方便起见,我复制并粘贴了以下内容:
在项目根目录下创建一个名为.env的文件(与
package.json位于)。在该文件中写入以下内容(在
url):
像往常一样构建项目(npm运行构建),这也会生成
index.html,其中包含:
继续@patrick hund,因为文档位置已移动,并且某些步骤似乎已更改。您可以在此处阅读并进行相应解释: 你可以在这个页面上找到一些好的信息,这些信息可以为你的下一个项目提供各种各样的想法。阅读本页后,以下是我最喜欢的小技巧: 如果您没有使用HTML5 pushState history API或根本没有使用客户端路由,则无需指定应用程序服务的URL。相反,您可以将其放在package.json中:
“主页”:“,
这将确保所有资产路径都是相对于index.html的。然后,您可以将应用程序从移动到,甚至无需重新构建
嘿@Patrik,我尝试过在我的package.json中添加“homepage”:“mywebsite/web”,但我得到了SyntaxError:Unexpected token“你真的输入了“mywebsite/web”吗?”?这应该是您网站的实际URL。我已经输入了我网站的url:d。我只是引用了你的例子来解释我的情况。我仍然会将
mywebsite/web/manifest.json
称为“相对”而不是“绝对”。
PUBLIC_URL=https://dsomething.cloudfront.net
<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">