欢迎分享,注明版权即可。
总体架构
前端: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`. },
其他待补充。。。