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,但是后台终于有反应了,前端接口也正常了。后来应该是后台人员在生产环境下打包后重启,前端可以正常接收数据。至此打包发布成功。

(如有侵权,请联系删除)

posted @   //唉  阅读(2238)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示