查看: 1443|回复: 0

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

发表于 2017-8-7 08:00:02
句号论坛
欢迎分享,注明版权即可。

总体架构

  1. 前端:react技术栈
  2. 后端:srping+springmvc+mybatis
复制代码

问题:

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

本人成功经验如下:
一、

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

WEB-INF/static

  1. function getServedPath(appPackageJson) {
  2. const publicUrl = getPublicUrl(appPackageJson);
  3. const servedUrl =
  4. // envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/'); 原始的配置
  5. envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/static');
  6. return ensureSlash(servedUrl, true);
  7. }
复制代码

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

  1. <error-page>
  2. <error-code>404</error-code>
  3. <location>/static/index.html</location>
  4. </error-page>
复制代码

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

  1. //dev中
  2. {
  3. test: /\.less$/,
  4. use: [
  5. require.resolve('style-loader'),
  6. require.resolve('css-loader'),
  7. {
  8. loader: require.resolve('postcss-loader'),
  9. options: {
  10. ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
  11. plugins: () => [
  12. require('postcss-flexbugs-fixes'),
  13. autoprefixer({
  14. browsers: [
  15. '>1%',
  16. 'last 4 versions',
  17. 'Firefox ESR',
  18. 'not ie < 9', // React doesn't support IE8 anyway
  19. ],
  20. flexbox: 'no-2009',
  21. }),
  22. ],
  23. },
  24. },
  25. {
  26. loader: require.resolve('less-loader'),
  27. options: {
  28. modifyVars: {"@primary-color": "#1DA57A"},//改变颜色
  29. },
  30. },
  31. ],
  32. },
  33. //prod中
  34. {
  35. test: /\.(css|less)/,
  36. loader: ExtractTextPlugin.extract(
  37. Object.assign(
  38. {
  39. fallback: require.resolve('style-loader'),
  40. use: [
  41. {
  42. loader: require.resolve('css-loader'),
  43. options: {
  44. importLoaders: 1,
  45. minimize: true,
  46. sourceMap: true,
  47. },
  48. },
  49. {
  50. loader: require.resolve('postcss-loader'),
  51. options: {
  52. // Necessary for external CSS imports to work
  53. // https://github.com/facebookincubator/create-react-app/issues/2677
  54. ident: 'postcss',
  55. plugins: () => [
  56. require('postcss-flexbugs-fixes'),
  57. autoprefixer({
  58. browsers: [
  59. '>1%',
  60. 'last 4 versions',
  61. 'Firefox ESR',
  62. 'not ie < 9', // React doesn't support IE8 anyway
  63. ],
  64. flexbox: 'no-2009',
  65. }),
  66. ],
  67. },
  68. },
  69. {
  70. loader: require.resolve('less-loader'),
  71. options: {
  72. modifyVars: {"@primary-color": "#1DA57A"},//改变颜色
  73. },
  74. },
  75. ],
  76. },
  77. extractTextPluginOptions
  78. )
  79. ),
  80. // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
  81. },
复制代码

其他待补充。。。



太阳http代理AD
回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条