browserHistory问题
二级路由如(localhost:8080/message/detail/:id),在开发环境下刷新后会报错,
Uncaught SyntaxError: Unexpected token <
在.webpackrc 设置 publicPath: '/'
将html的js引入方式改为从根下引入
browserHistory部署到服务器非根目录下,页面空白,但是资源已经加载
url没有匹配上,createHistory传入basename解决
如果在生产环境下,二级路由刷新后会出现js,css资源找不到,请求资源路径带上了前面的路由,需要修改publicPath也为basename
import dva from 'dva';
import createHistory from 'history/createBrowserHistory';
const history = createHistory({
basename:''//这里放入你对应的 basename
})
const app = dva({
history: history
});
...
在部署后,生产环境下,二级路由刷新会出现js,css资源请求不到。请求的路径包含了二级路由,需要同样设置publicPath为basename一样
env: {
development: {
publicPath: '/',
},
production: {
publicPath: '/h5/',
}
},
dva中使用sass
需要先npm install sass-loader node-sass --save
后,就可以使用scss语法
给className进行样式赋值无效
如果开发时样式是单独一个css文件,需要直接在页面导入全部,import './xxx.scss
时,发现在scss中直接用class或者id给标签写样式是没有作用,
试验过后,发现需要在.webpackrc 配置里禁用掉默认开启的 css-modules
{
'disableCSSModules': true
}
dva配置多环境的参数(全局环境参数)
默认在dva中会根据roadhog server 和 roadhog build 给项目新增了2个环境变量development, procution,
在项目中打印会发现console.log(process.env.NODE_ENV) //development, procution
这样我们就可以在打包时判断开发和线上环境来进行配置
例如
env: {
development: {
proxy: {
'/api': {
target: "http://xxx.aaa.com",
changeOrigin: true,
}
},
},
porcument: {
html: {
template: path.resolve('public', 'template', 'index.ejs'),
}
}
},
但是如果需要第其他环境变量来区分的话,可以在npm script中
roadhog server/build 新增需要的参数配置
这个时候在.webpackrc.js 中打印process.env.APP_ENV 会得到不同的变量,但是如果直接在项目中打印的话 会发现是undefined。(还不清楚具体原因)
我们就需要利用roadhog define这个配置项,
把APP_ENV这个值先赋值给他,
define: { 'APP_ENV': process.env.APP_ENV }
然后就可以在全局中直接使用 APP_ENV 这个环境变量区分使用一些逻辑了
eslint报错
但是如果在define中是使用上面方式赋值,然后直接使用APP_ENV eslint 会报 APP_ENV is not defined
,
这时你可以
define: {
'process.env.APP_ENV': process.env.APP_ENV
}
进行赋值在页面中直接调用 process.env._APP_ENV
的方式
也可以直接在.eslintrc.js 中将APP_ENV配置成一个全局变量,之后eslint就不会认为APP_ENV是未定义的变量了。
{
"extends": "umi",
"globals": {
"APP_ENV": false
}
}
使用 postcss plugin
可发时需要用到一些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自动转rem的插件,会导致antd-mobile的组件样式同时被转换,但是
导致样式很小,需要做适配处理
theme: {
'@hd': '2px'
},
extraBabelPlugins: [
["import", { libraryName: "antd-mobile", libraryDirectory: "es", style: true}], // 这里不能使用style: 'css' 形式,否则会没用
],
未完