dva + roadhog 踩坑汇总

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中

11.png

roadhog server/build 新增需要的参数配置

这个时候在.webpackrc.js 中打印process.env.APP_ENV 会得到不同的变量，但是如果直接在项目中打印的话会发现是undefined。(还不清楚具体原因)
我们就需要利用roadhog define这个配置项,

2.png

把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' 形式，否则会没用
  ],

未完