如何将react项目build的静态文件,放到javaweb项目中,使用tomcat运行

前端之家收集整理的这篇文章主要介绍了如何将react项目build的静态文件,放到javaweb项目中,使用tomcat运行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

欢迎分享,注明版权即可。

总体架构

前端:react技术栈
后端:srping+springmvc+mybatis

问题:

如果不想将前端项目单独部署,而是想要将打包后的静态文件放到后台项目中,然后通过tomcat部署,可行吗?
答案:完全没问题

本人成功经验如下:
一、

前端项目通过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',}),],},{
            loader: require.resolve('less-loader'),options: {
                modifyVars: {"@primary-color": "#1DA57A"},//改变颜色
            },//prod中
{
    test: /\.(css|less)/,loader: ExtractTextPlugin.extract(
        Object.assign(
            {
                fallback: require.resolve('style-loader'),use: [
                    {
                        loader: require.resolve('css-loader'),options: {
                            importLoaders: 1,minimize: true,sourceMap: true,{
                        loader: require.resolve('postcss-loader'),options: {
                            // Necessary for external CSS imports to work
                            // https://github.com/facebookincubator/create-react-app/issues/2677
                            ident: 'postcss',plugins: () => [
                                require('postcss-flexbugs-fixes'),autoprefixer({
                                    browsers: [
                                        '>1%',// React doesn't support IE8 anyway
                                    ],{
                        loader: require.resolve('less-loader'),options: {
                            modifyVars: {"@primary-color": "#1DA57A"},//改变颜色
                        },extractTextPluginOptions
        )
    ),// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},

其他待补充。。。

猜你在找的React相关文章