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