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中
roadhog server/build 新增需要的參數(shù)配置
這個時候在.webpackrc.js 中打印process.env.APP_ENV 會得到不同的變量,但是如果直接在項目中打印的話 會發(fā)現(xiàn)是undefined牺堰。(還不清楚具體原因)
我們就需要利用roadhog define這個配置項,
把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' 形式,否則會沒用
],
未完