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

未完

你可能感兴趣的:(dva + roadhog 踩坑汇总)