1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 将打包好的VUE文件部署到Web容器(Nginx)中 解决接口调用跨域问题

将打包好的VUE文件部署到Web容器(Nginx)中 解决接口调用跨域问题

时间:2022-05-05 10:13:55

相关推荐

将打包好的VUE文件部署到Web容器(Nginx)中 解决接口调用跨域问题

目录

背景

下载并解压Nginx

部署dist到Nginx中

启动Nginx

背景

VUE项目开发(如何搭建VUE开发环境请参见:如何搭建VUE开发环境_chanbzou1981的博客-CSDN博客)完成后需要部署发布,建议使用Nginx作为Web容器,因为支持反向代理,能方便地解决客户端跨域调用服务端接口的问题。

什么时跨域:由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域

下载并解压Nginx

下载稳定版本(nginx/Windows-1.20.2)即可。

Mainline version——主线版本

Stable version——稳定版本

Legacy versions——旧版本

nginx: download

将下载的 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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。