dva.js和umi.js

最近公司的项目有用到dva框架，这里做下学习总结；
菜鸟一枚，如有错误，欢迎指正。

dva是什么

• 官网：dva.js

一个轻量级的应用框架，
ta糅合了react-router、redux、fetch和用于处理异步的redux-saga

怎么用

1. 安装脚手架
  npm install dva-cli -g
  or
  yarn install dva-cli -g
2. 创建新应用
  dva new app-demo
3. 启动项目
  npm start
  or
  yarn run start

webpack配置

dva把配置文件以.webpackrc显示
首先，更改.webpackrc为.webpackrc.js，
然后写入配置文件(注意：原有的数组改成对象的形式)。

• 反向代理配置(注意：检查 /api 是否匹配域名)

export default {
  "extraBabelPlugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ],
  "proxy": {
    "/api": 
      "target": "https://baidu.com:8000",
      "changeOrigin": true,
    }
  },
  "disableCSSModules": true
}

• 配置环境变量，方便调试不同环境
  1.引入cross-env

npm install --save-dev cross-env

2.修改package.json文件

{
  "scripts": {
    "start": "umi dev",
    "start_test": "cross-env UMI_ENV=test umi dev",  //增加此行
    "start_prod": "cross-env UMI_ENV=prod umi dev",  //增加此行
    "build": "umi build",
    "test": "umi test",
    "lint": "eslint {src,mock,tests}/**/*.{js,jsx} --fix",
    "precommit": "lint-staged"
  },
}

3.项目根目录下新建.umirc.test.js和.umirc.prod.js两个文件

image.png
文件内定义不同环境对应的变量

export default {
  define: {
    'process.env.envType': 'test', // 此处可以设置环境变量,
  }
}

4.然后分别运行不同脚本，就能拿到对应的环境值

配置browserHistory （umi版本需3.x以上）

=====>项目结构如图

image.png

(1).配置.umirc文件，增加以下内容

export default defineConfig({
  publicPath: './',  //相当于react脚手架项目中的homepage
  base: '/user',  //设置路由前缀，通常用于部署到非根目录。比如，你有路由 / 和 /users，然后设置了 base 为 /foo/，那么就可以通过 /foo/ 和 /foo/users 访问到之前的路由;(需要和konga网关配置相同)
  history: { type: 'browser' },  //可不写，默认就是browser
  nodeModulesTransform: {
    type: 'none',
  },
  ...
});

若部署到服务器后不生效，需接着第2步配置

(2)项目根目录下增加nginx.conf文件

server {
    listen       80;
    server_name  localhost;

    gzip  on;
    gzip_comp_level 3;
    
    gzip_types
    # text/html is always compressed by HttpGzipModule
    text/css
    text/javascript
    text/xml
    text/plain
    text/x-component
    application/javascript
    application/json
    application/xml
    application/rss+xml
    font/truetype
    font/opentype
    application/vnd.ms-fontobject
    image/svg+xml;

    gzip_static on;

    server_tokens off;

    root   /usr/share/nginx/html;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options nosniff;


    location / {     
        index  index.html index.htm;
        add_header Cache-Control "public, max-age=0, must-revalidate";
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(css|js)$ {
        add_header Vary Accept-Encoding;
        add_header Cache-Control "public, max-age=0, must-revalidate";
    }

     location ~* \.(png|jpeg|jpg)$ {
        add_header Cache-Control "cache-control: public, max-age=31536000, immutable";
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

(3)Dockerfile文件中引入nginx.conf文件

COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY ./dist/  /usr/share/nginx/html/