目录
背景
VUE项目开发(如何搭建VUE开发环境请参见:如何搭建VUE开发环境_chanbzou1981的博客-CSDN博客)完成后需要部署发布,建议使用Nginx作为Web容器,因为支持反向代理,能方便地解决客户端跨域调用服务端接口的问题。
什么是跨域:由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
下载并解压Nginx
下载稳定版本(nginx/Windows-1.20.2)即可。
Mainline version——主线版本
Stable version——稳定版本
Legacy versions——旧版本
将下载的 nginx-1.20.2.zip解压得到nginx-1.20.2文件夹。
部署dist到Nginx中
将VUE打包得到的dist中的文件拷贝到Nginx的html目录下,例如:
E:\nginx-1.20.2\html\
启动Nginx
Nginx默认监听的端口为80(在\conf\nginx.conf 文件中配置):
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
双击或者在命令行窗口中运行 nginx.exe
访问http://localhost/验证部署成功(浏览网页服务默认的端口号都是80,因此只需输入网址即可,不用输入“: 80”了。)。
PS:重启或停止Nginx的方法:
- 重启: nginx -s reload
- 停止: nginx.exe -s stop 或 nginx.exe -s quit