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

Null 发布于2019-07-23 18:14 / 840人阅读

摘要：欢迎分享，注明版权即可。打包时，修改下的修改的路径对应需要在项目中的静态文件路径，比如我的是原始的配置二针对使用时，造成的刷新页面问题配置三修改配置文件时，注意和两个文件都要修改，同时两个配置文件关于的配置并不太一样。

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

总体架构

前端：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问题
配置


    404
    /static/index.html

三、修改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%",
                                        "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"},//改变颜色
                        },
                    },
                ],
            },
            extractTextPluginOptions
        )
    ),
    // Note: this won"t work without `new ExtractTextPlugin()` in `plugins`.
},

其他待补充。。。

超融合服务器 idc机房托管 java如何将web项目发布到服务器怎么部署react项目 javaweb项目 javaweb项目部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/35482.html

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

摘要：欢迎分享，注明版权即可。打包时，修改下的修改的路径对应需要在项目中的静态文件路径，比如我的是原始的配置二针对使用时，造成的刷新页面问题配置三修改配置文件时，注意和两个文件都要修改，同时两个配置文件关于的配置并不太一样。欢迎分享，注明版权即可。总体架构前端：react技术栈后端：srping+springmvc+mybatis 问题：如果不想将前端项目单独部署，而是想要将打包后...

elina 2019-08-15 11:05 评论0 收藏0
JavaWeb宿舍管理系统环境搭建运行教程

摘要：在百度搜索，下载后解压到某个盘符下即可记住解压路径，后面要用下载并配置环境变量很重要，作者使用版本，也是建议初学者使用作者的版本其它版本后面配置可能会出问题。下载和环境变量配置在百度搜索关键词有很多教程，这里不在重复。 ...

不知名网友 2021-11-29 10:50 评论0 收藏0
JavaWeb从0开始学（一）-----第一个Web应用程序与JSP工作原理

摘要：当后继请求相同的页面时，容器加载之前生成的类，并且通知去执行已经存在的字节码，从而省去了转换的过程，这也是第一次执行页面时间较长的原因。以往学习的时候大多是看完书或者看完视频，动手实践一下就OK了。然而过了一段时间我发现东西都忘差不多了，需要复习才能重新掌握。现在开始学习JavaWeb了，我将在这里记录自己的学习的一点一滴，不仅便于自己以后回顾知识点，也希望能对JavaWeb初学者有...

CloudDeveloper 2019-08-14 17:42 评论0 收藏0
深入分析JavaWeb Item1 -- JavaWeb开发入门

摘要：中主要是使用语言。将的动态功能和标准的安全性引入大型网络应用的开发集成部署和管理之中。提供了一个图形界面的管理工具，称为信息服务管理器，可用于监视配置和控制服务。一、基本概念 1.1、WEB开发的相关知识　　WEB，在英语中web即表示网页的意思，它用于表示Internet主机上供外界访问的资源。　　Internet上供外界访问的Web资源分为：静态web资源（如html 页面...

tinna 2019-08-14 12:53 评论0 收藏0
IDEA如何部署JAVAWEB项目到TOMCAT？

摘要：创建一个传统项目不使用构建方法一勾选方法二勾选部署项目并非把项目放到的目录中，而项目还是在源项目目录中，采用了一种无入侵项目方式部署不修改任何文件虚拟目录方式在启动后，会在目录下创建对应目录，并复制个目录到目录下，这 IDEA创建一个传统JAVA WEB项目（不使用maven构建）方法一 File --> NEW --> Project --> Java (勾选Web Applica...

bitkylin 2019-08-15 18:16 评论0 收藏0