Vue项目构建后通过Nginx/SpringBoot/Express/Egg发布

构建

当项目开发完毕，只需要运行一行命令就可以打包你的应用：

$ yarn build
or
$ npm run build

由于 Ant Design Pro 使用的工具 Vue-cli3 已经将复杂的流程封装完毕，构建打包文件只需要一个命令 yarn build 或 npm run build，构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 *.js、*.css、index.html 等静态文件，也包括了项目根的 public/ 下的所有文件。

如果需要自定义构建，比如指定 dist 目录等，可以通过 /vue.config.js 进行配置，详情参看：Vue-cli3 配置。

前端路由与服务端的结合

Ant Design Pro 使用的 Vue-Router 支持两种路由方式：browserHistory 和 hashHistory 可以参考文档 Vue-Router URL 模式。
可以在 src/router/index.js 中进行配置选择用哪个方式：

import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap } from '@/config/router.config'Vue.use(Router)export default new Router({mode: 'history', // 默认是 history 可以改为 hashbase: process.env.BASE_URL,scrollBehavior: () => ({ y: 0 }),routes: constantRouterMap
})

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。如果你能控制服务端，我们推荐使用 browserHistory。

使用 nginx

nginx 作为最流行的 web 容器之一，配置和使用相当简单，只要简单的配置就能拥有高性能和高可用。推荐使用 nginx 托管。示例配置如下：

server {listen 80;# gzip configgzip 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;# 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验 # rewrite ^/(.*)$ https://preview.pro.loacg.com/$1 permanent;}location /api {proxy_pass https://preview.pro.loacg.com;proxy_set_header   X-Forwarded-Proto $scheme;proxy_set_header   Host              $http_host;proxy_set_header   X-Real-IP         $remote_addr;}
}
server {# 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验 listen 443 ssl http2 default_server;# 证书的公私钥ssl_certificate /path/to/public.crt;ssl_certificate_key /path/to/private.key;location / {# 用于配合 browserHistory 使用try_files $uri $uri/ /index.html;}location /api {proxy_pass https://preview.pro.loacg.com;proxy_set_header   X-Forwarded-Proto $scheme;proxy_set_header   Host              $http_host;proxy_set_header   X-Real-IP         $remote_addr;}
}

使用 spring boot

Spring Boot 是使用最多的 java 框架，只需要简单的几步就可以与 Ant Design Pro 进行整合。
首先运行 build
$ yarn build or $ npm run build
然后将编译之后的文件复制到 spring boot 项目的 /src/main/resources/static 目录下。
重新启动项目，访问 http://localhost:8080/ 就可以看到效果。
为了方便做整合，最好使用 hash 路由。如果你想使用 browserHistory ，你需要创建一个 controller ，并添加如下代码：

@RequestMapping("/api/**")
public ApiResult api(HttpServletRequest request, HttpServletResponse response){return apiProxy.proxy(request, reponse);
}@RequestMapping(value="/**", method=HTTPMethod.GET)
public String index(){return "index"
}

注意 pro 并没有提供 java 的 api 接口实现，如果只是为了预览 demo，可以使用反向代理到 https://preview.pro.loacg.com。

使用 express

express 的例子

app.use(express.static(path.join(__dirname, 'build')));app.get('/*', function (req, res) {res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

使用 egg

egg 的例子

// controller
exports.index = function* () {yield this.render('App.jsx', {context: {user: this.session.user,},});
};// router
app.get('home', '/*', 'home.index');

关于路由更多可以参看 Vue-Router 文档。