# 项目部署

# 项目打包

无论您使用的是Hash路由还是History路由,您都需要根据您要发布的环境来使用以下命令将代码编译并打包。

打包测试环境代码

npm run build:staging
1

打包生产环境代码

npm run build
1

# Hash模式部署

增加以下内容到您的nginx配置文件中。







 
 
 
 






server {
    listen 80;
    server_name www.yourdomain.com;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    location / {
        root /xxx/xxx/dist;
        index index.html;
    }
    # 接口代理
    location /api {
        proxy_pass http://localhost:10010/;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

其中/xxx/xxx/dist为前端代码包的绝对路径。

# History模式部署

增加以下内容到您的nginx配置文件中。







 
 
 
 
 






server {
    listen 80;
    server_name www.yourdomain.com;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    location / {
        try_files $uri $uri/ /index.html;
        root /xxx/xxx/dist;
        index index.html;
    }
    # 接口代理
    location ^~ /api/ {
        proxy_pass http://localhost:10010/;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

其中/xxx/xxx/dist为前端代码包的绝对路径。