1.npm run buile
打包命令,执行此命令后会生成一个”dist“文件夹
2.将dist文件中的所有文件复制到nginx的html目录下
Mac的操作系统中,nginx的html目录可能在/usr/local/Cellar/nginx/1.17.10/html
(Windows没有实验)
3.配置nginx.co
nfig文件
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]\.";
# 打包后项目路径 指向dist
root /Users/xxxxxx/dist;
location / {
# 用于配合 browserHistory使用
try_files $uri $uri/ /index.html;
# 如果有资源,建议使用 https + http2,配合按需加载可以获得更好的体验
rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;
}
location /server/api/ {
# 代理接口访问
proxy_pass http://localhost:8080/;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
}
}
4.nginx -s reload
重新加载文件并启动