1.安装部署Nginx
2.编译vue项目
将生成的目录拷贝至自己想放的目录,这里我在/home目录下创建了/www目录,www目录下用于存放编译好的vue生成目录。
3.配置Nginx
server {
listen 80;
server_name xxx.xxx.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
server_name xxx.xxx.com;
ssl_certificate ../cert/xxx.pem;
ssl_certificate_key ../cert/xxx.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4:!DHE;
location / {
root /home/www/dist; # vue编译后的dist目录
index index.html; # vue dist目录下的index.html
try_files $uri $uri/ /index.html; # 刷新页面不会404
}
location /proxy-api { # 处理代理请求,因为vue项目里的proxy设置了proxy-api路由地址
rewrite ^.+proxy-api/?(.*)$ /$1 break; # 反向代理,替换proxy前缀
include uwsgi_params;
proxy_pass https://xxxx.xxxx.com; # 接口地址
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
4.访问https://xxx.xxx.com即可
文章评论