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，但是后台終於有反應了，前端接口也正常了。后來應該是后台人員在生產環境下打包后重啟，前端可以正常接收數據。至此打包發布成功。

(如有侵權，請聯系刪除)