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 可以改爲 hash
base: 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 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;
# 如果有資源,建議使用 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 文檔 。