dva-cli搭建的react项目中出现的坑

一、切换history

基本情况

希望将history由默认的hashHistory切换为browserHistory，搜索资料
按照“dva知识地图”的描述修改 src/index.js 文件如下无效:

import { browserHistory } from 'dva/router';
const app = dva({
  history: browserHistory,
});

此时dva版本如下：

"dva": "^2.0.0",

解决办法

• 1、引入第三方库history；
• 2、修改 src/index.js 文件：

import { createBrowserHistory as createHistory } from 'history';

const app = dva({
  history: createHistory()
});

二、更改网站图标favicon

基本情况

dva-cli搭建的项目有默认的网站图标，按照传统方式更改时无效果：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

解决办法

• 方法一：
  • 我所做的项目中网站小图标是通过后台设置的，此时前端不用做任何配置。
• 方法二：
  • 后来在看ant design pro的代码时发现项目中网站图标直接引的外链，我在demo中尝试把图片放在七牛云上，然后引入生成的外链：

<link rel="icon" href="http://oyvrltpxa.bkt.clouddn.com/favicon.jpg" type="image/x-icon">

注意：此时图片并不要求必须是.ico后缀了，比如笔者这次的jpg格式就可以。

三、脚手架自带的fetch基础配置不完善

基本情况

前端在发起ajax请求时需要把cookie带上，否则线上项目会报302重定向错误，而此脚手架默认的request.js文件中fetch组件的代码缺少了此项配置。

解决办法

需要在request请求中设置credentials

credentials: 'include',

• credentials 是Request接口的只读属性，用于表示用户代理是否应该在跨域请求的情况下从其他域发送cookies。include: 总是发送cookies, 即使来自跨域的请求。omit: 从不发送cookies。same-origin: 只有当URL与响应脚本同源才发送cookies。

四、无法更改默认的host

基本情况

• 我所在项目组所做项目所有的ajax请求的请求头中必须带上Cookie字段来通过公司权限验证，而公司的后台只验证请求的域名，规则是域名中含有公司名，如果本地调试时HOST是localhost，则会报跨域错误和未登录错误，本地开发调试需要把HOST改为含有公司名的域名。
• 项目中用roadhog来协助本地调试和构建，默认HOST为localhost，按照官方文档设置新HOST未起效果。

解决办法

• 方法一：
  • 1.1、一劳永逸的方法是设置本地HOST（未设置成功，此方法暂弃）。
  • 1.2、更改node_modules中的roadhog的默认HOST，此修改不会影响生产环境（没办法的办法）。
• 方法二：
  • 此方法比较取巧，原理是用后台完整路径发起ajax请求，构建时去掉域名；
  • 具体步骤是：
    • 1、把域名放在一个变量中；
    • 2、在工具类request.js中拼接url;

const prefixUrl = 'http://dev.xxx.xxx.com:7001';
const uRl= `${prefixUrl }${url}`;

注意： 此处的url变量是用户传来的端口以后的部分，uRl是拼接好要放入fetch请求中的‘url’，构建时只要把变量prefixUrl 改为空字符串即可。

• 另外，如果用方法二做本地调试时需要把credentials: 'include'注释掉，构建时再打开，略坑！