前言

断断续续，接近一个月时间，我们终于到了最后一个章节，部署上线。回想之前我们从刚开始的拉取代码，到修改代码，新增页面，调用接口，维护菜单一直到现在的上线部署，十篇文章，虽然不多，但是基本上都涵盖了我们快速开发的要点，伙伴们，这篇终于到结尾了。跟着我的步骤，完成这篇文章，我们基本上可以下次很灵活的使用 Ant Design Pro 来进行开发了。快点一起来看看吧

一、开发步骤：

依旧如此，在开发前我们再次需要看一遍官方文档，以免在开发过程中出现错误。

1. 打开ant design pro的官网文档。找到构建与部署。

有过开发经验的朋友大概都懂，一般来说，开发我们需要使用命令

npm run start / npm run dev / npm run serve

这三种其中的某一个，如果还是不对，那就要打开项目根目录下的package.json 查看 script 字段看看里面是否有修改。

而部署的时候一样，我们不能直接将整个项目使用开发的手段跑到服务器上。

而是我们需要先进行打包编译。之后将编译过的文件（html，css，js）等文件部署到服务器上才行。也就是说，我们打包编译后，其实部署的是一个静态文件。

官方给的命令是 npm run build

下来我们跟着尝试下构建编译。

打包后的文件夹里的内容：

很明显的可以看到是我们最为普通的 html，css js，以及图片文件。

这里我们就打包结束。

2 上线部署

上线部署我们与构建一样，也从文档开始看起，文档里说，pro默认提供了mock数据，而在此之前，我们的处理其实以及通过命令行将mock关闭了。所以按照官方的说法来说，我们只需要将整个dist复制到我们的cdn或者静态服务器，那就结束了，其中index.html 就是我们的服务器入口。

但同时，我们在这里也需要处理一些东西，如：路由。

相信一些同学会发现，部署上线后都正常，结果一刷新页面404 了？怎么办！官方有给出文档。

这是什么原因呢？

hashHistory 使用如 https://cdn.com/#/users/123 这样的 URL，取井号后面的字符作为路径。browserHistory 则直接使用 https://cdn.com/users/123 这样的 URL。使用 hashHistory 时浏览器访问到的始终都是根目录下 index.html。使用 browserHistory 则需要服务器做好处理 URL 的准备，处理应用启动最初的 / 这样的请求应该没问题，但当用户来回跳转并在 /users/123 刷新时，服务器就会收到来自 /users/123 的请求，这时你需要配置服务器能处理这个 URL 返回正确的 index.html，否则就会出现 404 找不到该页面的情况。如果没有对服务器端的控制权限，建议在配置中开启 exportStatic，这样编译后的 dist 目录会对每一个路由都生成一个 index.html，从而每个路由都能支持 deeplink 直接访问。强烈推荐使用默认的 browserHistory。

同时，可能有的小伙伴还会问，如果部署到非根目录的文件夹下。那我如何配置呢？

修改线上请求地址

以及朋友们最后经常问我的，pro上线，需要改正式的请求地址，它的请求地址在哪改。我怎么改了config 也没作用？

对，那是不起作用的。

ant design pro上线部署后，正式请求地址与开发的配置可不同，正式地址是存放在其它地方的。

如：官网给我们给了nginx，spring boot ，express ，egg 等四种情况。

其中就以我们最常见的nginx 的配置：

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    root /usr/share/nginx/html;
    location / {
        # 用于配合 browserHistory使用
        try_files $uri $uri/index.html /index.html;
        # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
        # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;
    }
    location /api {
        proxy_pass https://ant-design-pro.netlify.com;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

在这个配置中 location / 是用来配合router的browserHistory 来解决刷新页面后 404问题的。

而 location / api。则是正式我们的项目用到的正式环境的请求地址。

所以伙伴们明白了吧。

在正式上线时候，我们不需要在项目中配置环境地址，相反我们只需要打包即可。

但是重要的是，我们需要类似于NGINX 等web 容器。并且需要给它写上我们的请求地址。

这样我们在项目正式上线后才能获取到这个地址，并且用来应用！

总结：

到目前为止，我们的ant design pro课程就正式结束了，笔者是站在使用者的角度，将一个模板从0开始拉取一直到完成项目后上线，所有需要踩得坑都走了一遍，相信如果你是认真追读的，到目前为止，你也可以利用 ant design pro 来做你的后台开发模板了。当然了，技术之深不是我一两句能够交代结束的。本次也只是带大家入门。后期，还会给大家出部分课程，带大家走进 ant design pro的底层封装原理。感兴趣的伙伴记得留下赞哦~