Vite打包Vue3以及采用Nginx部署項目


1、npm run build 打包時ts校驗報錯,修改package.json里的build節點。

 # 修改package.json里的"build": "vue-tsc --noEmit && vite build" 為 "build": "vite build"。
 "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

2、靜態資源404問題,需要在vite.config.js里面配置base的根目錄的路徑 (根目錄千萬不要設置)

3、nginx配置api代理及解決刷新空白頁完整 示例


user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/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  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;

# 不能包含include,否則會導至配置重復
#    include /etc/nginx/conf.d/*.conf;

    proxy_connect_timeout 600;
    proxy_read_timeout 600;
    proxy_send_timeout 600;

    server {
      listen       80;
      listen  [::]:80;
      server_name  localhost;

      location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
	try_files $uri $uri/ /index.html;
      }

      location /api/ {
	proxy_pass   http://172.26.3.104:800/;

        proxy_set_header  Host $host;
        proxy_set_header  X-Real-IP        $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header  X-NginX-Proxy    true;
      }

      location /upload/ {
        proxy_pass   http://172.26.3.104:801;

        proxy_set_header  Host $host;
        proxy_set_header  X-Real-IP        $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header  X-NginX-Proxy    true;
      }

      #error_page  404              /404.html;

      # redirect server error pages to the static page /50x.html
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
        root   /usr/share/nginx/html;
      }
    }
    server {
      listen       80;
      server_name  sun.tumake.com;

      location / {
        root   /usr/share/nginx//html/flower;
        index  index.html index.htm;
      }
    }	
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM