dva + roadhog 踩坑匯總

browserHistory問題

二級路由如(localhost:8080/message/detail/:id),在開發(fā)環(huán)境下刷新后會報錯,

Uncaught SyntaxError: Unexpected token <
在.webpackrc 設置 publicPath: '/' 將html的js引入方式改為從根下引入

browserHistory部署到服務器非根目錄下,頁面空白,但是資源已經(jīng)加載

url沒有匹配上喜喂,createHistory傳入basename解決

如果在生產(chǎn)環(huán)境下,二級路由刷新后會出現(xiàn)js,css資源找不到感猛,請求資源路徑帶上了前面的路由,需要修改publicPath也為basename

import dva from 'dva';
import createHistory from 'history/createBrowserHistory';
const history = createHistory({
  basename:''//這里放入你對應的 basename
})
const app = dva({
  history: history
});
...

在部署后奢赂,生產(chǎn)環(huán)境下陪白,二級路由刷新會出現(xiàn)js,css資源請求不到膳灶。請求的路徑包含了二級路由咱士,需要同樣設置publicPath為basename一樣

env: {
    development: {
      publicPath: '/',
    },
    production: {
      publicPath: '/h5/',
    }
  },

dva中使用sass

需要先npm install sass-loader node-sass --save后,就可以使用scss語法

給className進行樣式賦值無效

如果開發(fā)時樣式是單獨一個css文件轧钓,需要直接在頁面導入全部序厉,import './xxx.scss時,發(fā)現(xiàn)在scss中直接用class或者id給標簽寫樣式是沒有作用毕箍,
試驗過后弛房,發(fā)現(xiàn)需要在.webpackrc 配置里禁用掉默認開啟的 css-modules

{
  'disableCSSModules': true
}

dva配置多環(huán)境的參數(shù)(全局環(huán)境參數(shù))

默認在dva中會根據(jù)roadhog server 和 roadhog build 給項目新增了2個環(huán)境變量development, procution,
在項目中打印會發(fā)現(xiàn)console.log(process.env.NODE_ENV) //development霉晕, procution
這樣我們就可以在打包時判斷開發(fā)和線上環(huán)境來進行配置
例如

env: {
    development: {
      proxy: {
        '/api': {
          target: "http://xxx.aaa.com",
          changeOrigin: true,
        }
      },
    },
    porcument: {
      html: {
        template: path.resolve('public', 'template', 'index.ejs'),
      }
    }
  },

但是如果需要第其他環(huán)境變量來區(qū)分的話庭再,可以在npm script中


11.png

roadhog server/build 新增需要的參數(shù)配置

這個時候在.webpackrc.js 中打印process.env.APP_ENV 會得到不同的變量,但是如果直接在項目中打印的話 會發(fā)現(xiàn)是undefined牺堰。(還不清楚具體原因)
我們就需要利用roadhog define這個配置項,

2.png

把APP_ENV這個值先賦值給他拄轻,

define: {  'APP_ENV': process.env.APP_ENV }

然后就可以在全局中直接使用 APP_ENV 這個環(huán)境變量區(qū)分使用一些邏輯了

eslint報錯

但是如果在define中是使用上面方式賦值,然后直接使用APP_ENV eslint 會報 APP_ENV is not defined伟葫,
這時你可以

define: { 
 'process.env.APP_ENV': process.env.APP_ENV 
}

進行賦值在頁面中直接調(diào)用 process.env._APP_ENV的方式
也可以直接在.eslintrc.js 中將APP_ENV配置成一個全局變量恨搓,之后eslint就不會認為APP_ENV是未定義的變量了。

{
  "extends": "umi",
    "globals": {
      "APP_ENV": false
    }
}

使用 postcss plugin

可發(fā)時需要用到一些postcss的插件,比如postcss-pxtorem斧抱,由于roadhog 文檔沒有說明常拓,實際可以使用
extraPostCSSPlugins 進行配置

import pxtorem2 from 'postcss-pxtorem'

export default {
  extraPostCSSPlugins: [
    pxtorem2({ rootValue: 100, propWhiteList: [], })
  ],
}

配合使用postcss-pxtorem (antd主題無法修改)

如果項目使用antd-mobile(2.0以上版本) 并且同時使用了pxtorem自動轉(zhuǎn)rem的插件,會導致antd-mobile的組件樣式同時被轉(zhuǎn)換辉浦,但是
導致樣式很小弄抬,需要做適配處理

  theme: {
    '@hd': '2px'
  },
  extraBabelPlugins: [
    ["import", { libraryName: "antd-mobile", libraryDirectory: "es", style: true}], // 這里不能使用style: 'css' 形式,否則會沒用
  ],

未完

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末宪郊,一起剝皮案震驚了整個濱河市掂恕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌弛槐,老刑警劉巖懊亡,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異乎串,居然都是意外死亡店枣,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門叹誉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鸯两,“玉大人,你說我怎么就攤上這事桂对∷ψ浚” “怎么了鸠匀?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵蕉斜,是天一觀的道長。 經(jīng)常有香客問我缀棍,道長宅此,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任爬范,我火速辦了婚禮父腕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘青瀑。我一直安慰自己璧亮,他們只是感情好,可當我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布斥难。 她就那樣靜靜地躺著枝嘶,像睡著了一般。 火紅的嫁衣襯著肌膚如雪哑诊。 梳的紋絲不亂的頭發(fā)上群扶,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天,我揣著相機與錄音,去河邊找鬼竞阐。 笑死缴饭,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的骆莹。 我是一名探鬼主播颗搂,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼幕垦!你這毒婦竟也來了峭火?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤智嚷,失蹤者是張志新(化名)和其女友劉穎卖丸,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體盏道,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡稍浆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了猜嘱。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片衅枫。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖朗伶,靈堂內(nèi)的尸體忽然破棺而出弦撩,到底是詐尸還是另有隱情,我是刑警寧澤论皆,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布益楼,位于F島的核電站,受9級特大地震影響点晴,放射性物質(zhì)發(fā)生泄漏感凤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一粒督、第九天 我趴在偏房一處隱蔽的房頂上張望陪竿。 院中可真熱鬧,春花似錦屠橄、人聲如沸族跛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽礁哄。三九已至,卻和暖如春贮匕,著一層夾襖步出監(jiān)牢的瞬間姐仅,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留掏膏,地道東北人劳翰。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像馒疹,于是被迫代替她去往敵國和親佳簸。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,925評論 2 344

推薦閱讀更多精彩內(nèi)容

  • 初始化 安裝 dva-cli 用于初始化項目: 創(chuàng)建項目目錄颖变,并進入該目錄: 初始化項目: 然后運行 npm st...
    Paranoid_K閱讀 120,812評論 11 104
  • dva.js 簡介 dva 是阿里前端架構(gòu)師 sorrycc 帶 team 研發(fā)的一套輕量級前端框架生均,其目的是盡量...
    那顆星_fcaf閱讀 3,664評論 0 24
  • webpack 是什么? 本質(zhì)上腥刹,webpack 是一個現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包器(mo...
    IT老馬閱讀 3,303評論 2 27
  • 前提: 安裝webpack马胧、webpack-cli 一、首先先讓出來一個頁面有內(nèi)容 先添加.gitignore衔峰,將...
    codingQi閱讀 1,452評論 0 0
  • 今天正式入駐簡書佩脊,準備開一個專題總結(jié)下最近的學習成果 —— dva。 dva 是由阿里架構(gòu)師 sorrycc 帶領...
    dkvirus閱讀 19,159評論 28 116