如何将react build的静态文件部署阿里云的tomcat 上

是这样的,想请分析下,如何将react build的静态文件部署阿里云的tomcat 上
最新回答
铅笔画不出的界限

2024-06-22 08:55:02

本人成功经验如下:

一、

前端项目通过create-react-app + react-router4 + antd使用Facebook官方提供的cli工具创建项目,屏蔽掉自己创建时关于webpack的一对问题,在cli基础上按个人需要自定义配置即可。
打包时,修改config下的paths.js修改的路径对应需要在java项目中的静态文件路径,比如我的是

WEB-INF/static

function getServedPath(appPackageJson) {  const publicUrl = getPublicUrl(appPackageJson);  const servedUrl =    // envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/'); 原始的配置
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/static');  return ensureSlash(servedUrl, true);
}

二、针对使用react-router时,造成的刷新页面404问题
配置

<error-page>
<error-code>404</error-code>
<location>/static/index.html</location>
</error-page>

三、修改webpack配置文件时,注意dev和prod两个文件都要修改,同时两个配置文件关于loader的配置并不太一样。

//dev中{
test: /\.less$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [                            '>1%',                            'last 4 versions',                            'Firefox ESR',                            'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},