摘要:歡迎分享,注明版權即可。打包時,修改下的修改的路徑對應需要在項目中的靜態文件路徑,比如我的是原始的配置二針對使用時,造成的刷新頁面問題配置三修改配置文件時,注意和兩個文件都要修改,同時兩個配置文件關于的配置并不太一樣。
歡迎分享,注明版權即可。
總體架構
前端: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`. },
其他待補充。。。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/67534.html
摘要:在百度搜索,下載后解壓到某個盤符下即可記住解壓路徑,后面要用下載并配置環境變量很重要,作者使用版本,也是建議初學者使用作者的版本其它版本后面配置可能會出問題。下載和環境變量配置在百度搜索關鍵詞有很多教程,這里不在重復。 ...
摘要:當后繼請求相同的頁面時,容器加載之前生成的類,并且通知去執行已經存在的字節碼,從而省去了轉換的過程,這也是第一次執行頁面時間較長的原因。 以往學習的時候大多是看完書或者看完視頻,動手實踐一下就OK了。然而過了一段時間我發現東西都忘差不多了,需要復習才能重新掌握。現在開始學習JavaWeb了,我將在這里記錄自己的學習的一點一滴,不僅便于自己以后回顧知識點,也希望能對JavaWeb初學者有...
摘要:中主要是使用語言。將的動態功能和標準的安全性引入大型網絡應用的開發集成部署和管理之中。提供了一個圖形界面的管理工具,稱為信息服務管理器,可用于監視配置和控制服務。 一、基本概念 1.1、WEB開發的相關知識 WEB,在英語中web即表示網頁的意思,它用于表示Internet主機上供外界訪問的資源。 Internet上供外界訪問的Web資源分為: 靜態web資源(如html 頁面...
摘要:創建一個傳統項目不使用構建方法一勾選方法二勾選部署項目并非把項目放到的目錄中,而項目還是在源項目目錄中,采用了一種無入侵項目方式部署不修改任何文件虛擬目錄方式在啟動后,會在目錄下創建對應目錄,并復制個目錄到目錄下,這 IDEA創建一個傳統JAVA WEB項目(不使用maven構建) 方法一 File --> NEW --> Project --> Java (勾選Web Applica...
閱讀 5036·2021-07-25 21:37
閱讀 683·2019-08-30 15:53
閱讀 3350·2019-08-29 18:47
閱讀 687·2019-08-29 15:39
閱讀 2130·2019-08-29 13:12
閱讀 1798·2019-08-29 12:43
閱讀 2978·2019-08-26 11:52
閱讀 1890·2019-08-26 10:15