在开发完成vue项目的时候,面临的问题就是打包部署。
打包很简单,只需要执行npm run build命令即可。
但是部署的时候需要使用nginx做反向代理,因为开发的时候我们使用的是webpack提供的proxyTable做的代理从而解决了开发环境的跨域请求问题。
使用nginx反向代理
根据前面写到的下载安装nginx服务器
配置nginx
server {
listen 9999; # 监听端口
server_name localhost; # 域名可以有多个,用空格隔开
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /www/web/dist; #站点根目录,即网页文件存放的根目录, 默认主页目录在nginx安装目录的html子目录。
try_files $uri $uri/ /index.html;
}
#ssl配置省略
location /api {
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://192.168.1.100:7001; #node api server 即需要代理的IP地址
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
#error_page 404 /404.html; #对错误页面404.html 做了定向配置
# redirect server error pages to the static page /50x.html
#将服务器错误页面重定向到静态页面/50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}