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

未完

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 初始化 安装 dva-cli 用于初始化项目: 创建项目目录,并进入该目录: 初始化项目: 然后运行 npm st...
    Paranoid_K阅读 120,782评论 11 104
  • dva.js 简介 dva 是阿里前端架构师 sorrycc 带 team 研发的一套轻量级前端框架,其目的是尽量...
    那颗星_fcaf阅读 3,656评论 0 24
  • webpack 是什么? 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(mo...
    IT老马阅读 3,301评论 2 27
  • 前提: 安装webpack、webpack-cli 一、首先先让出来一个页面有内容 先添加.gitignore,将...
    codingQi阅读 1,450评论 0 0
  • 今天正式入驻简书,准备开一个专题总结下最近的学习成果 —— dva。 dva 是由阿里架构师 sorrycc 带领...
    dkvirus阅读 19,155评论 28 116