React实战(1)——Ant Design Pro项目hist

一、应用场景

• 同vue实战(12)——vue实战项目(非根目录)history模式下去#具体流程详解（二）中一样

二、nginx配置文件修改

server {
    listen       80;
    server_name  localhost;
    location / { 
    proxy_pass http://localhost:8000;
    }
  location /active {
      try_files $uri $uri/ /healthy/index.html;
  }

  location /healthy/api {
       proxy_pass   http://localhost:8888/;
  }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

8000端口下nginx配置

server {
    listen  8000;
    server_name   localhost;
    location / {
        root   /usr/project/;
        try_files $uri $uri/ /index.html;  #配合react项目的history模式去除#时用到
        index index.html;
        client_max_body_size    8m;
    }
}

配置文件说明

• 使用try_files方式的前提是服务器安装nginx的时候需要安装相应的模块，我是通过yarn源的方式安装的，包含了所有模块，所以可以直接使用
• 80端口下根目录会指向8000端口（习惯把项目都放在8000端口下指向的project目录下），同时添加/active访问拦截指向healthy目录下index.html，同时添加/healthy/api是为了拦截接口访问
• 8000端口下root指向的是/usr/project/，此目录放置所有前端项目文件夹，一些node服务端项目也可以放进去

三、Ant Design Pro项目中相关配置

• 项目目录下config/config.js

export default {
  plugins,
  proxy,
  block: {
    defaultGitUrl: 'https://github.com/ant-design/pro-blocks',
  },
  hash: false, // browser 模式下为false, hash 模式下为true
  history: 'browser', // 默认是 browser ， hash
  base: '/healthy/', // browser 模式下为 /healthy/ ， hash模式下为 /
  publicPath: '/healthy/', // 模式下为 /healthy/ ， hash模式下为 ./
  targets: {
    ie: 11,
  },
  devtool: isAntDesignProPreview ? 'source-map' : false,
}

• pages/document.ejs中引用的外部文件

<link rel="shortcut icon" href="./favicon.ico">

• 调用后端接口相关配置

// config/config.js配置文件
global.api = '/healthy/api'
// 调用接口页面
let response = await axios.get(`${global.api}/dtea-service/user/result?examId=${this.questionId}`);

• 为了本地项目和发布至服务器打包文件保持一致，可以把项目中本地代理修改下

const proxy = {
  '/healthy/api': {
    target: 'http://192.136.12.211:8888',
    changeOrigin: true,
    pathRewrite: {
      '^/healthy/api': '',
    },
  },
};
}

♥ 生活不能等别人来安排，要自已去争取和奋斗；而不论其结果是喜是悲，但可以慰藉的是，你总不枉在这世界上活了一场。 ——路遥《平凡的世界》