vue项目打包部署nginx(本地部署)过程中遇到的问题
1.首先说一下流程:
打包vue项目,打包后的dist直接放在自动生成的路径就好
1 | npm run build |
下载安装nginx,安装过程就不再说了
打开conf文件夹中的nginx.conf,修改以下地方:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 8082; server_name localhost; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers Origin,X-Requested-Width,Content-Type,Accept; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; #charset koi8-r; #access_log logs/host.access.log main; root E:/quzhou/quz-monitor/dist; location / { try_files $uri $uri/ /index.html; index index.html index.htm; } location /ne-api/ { rewrite ^.+ne-api/?(.*)$ /$1 break; proxy_pass http://192.168.3.37:10480; #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; } |
cmd进入到nginx文件夹下,start nginx 启动,一些命令如下,每次修改nginx.conf文件后都要进行nginx -s reload:
nginx.exe -t
taskkill /IM nginx.exe /F
可参考 https://www.cnblogs.com/mmzuo-798/p/9273754.html
2.遇到的问题:
响应200,但没有返回数据,并且后端也没有收到请求,刚进入页面的时候接口是正确的,刷新之后就只能请求localhost了。
preview中显示“We're sorry but app doesn't work properly without JavaScript enabled. Please enable it to continue.”
网上说是因为浏览器禁用了JavaScript,检查后发现并没有禁用。
后来发现这句话在index.html中出现:
查了noscript标签,还是没有解决问题。
在网上搜了关于响应200,但没有返回数据的解决办法,基本都是以下两种方法:
尝试之后并没有什么用。唉
最后是通过将开发环境改成生产环境之后打包,竟然能够访问到后端了。。来自编程小白的无奈
改过之后报错404:
虽然报404,但是后台终于有反应了,前端接口也正常了。后来应该是后台人员在生产环境下打包后重启,前端可以正常接收数据。至此打包发布成功。
(如有侵权,请联系删除)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了