vue项目打包部署nginx（本地部署）过程中遇到的问题

1.首先说一下流程：

打包vue项目，打包后的dist直接放在自动生成的路径就好

npm run build

下载安装nginx，安装过程就不再说了

 

打开conf文件夹中的nginx.conf，修改以下地方：

 

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

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