本地Nginx部署Vite项目

使用nginx docker镜像

podman 可以替换成docker命令

podman pull nginx

创建配置文件nginx.conf

worker_processes 1;  
  
events {  
   worker_connections 1024;  
}  
  
http {  
   include     mime.types;  
   server {  
       root /usr/share/nginx/html;  
       listen  80;  
       server_name  localhost;  
  
       location / {  
           index   index.html;  
           try_files   $uri    $uri/     index.html;  
           # 对于SPA应用， 要配置此条以避免404
       }  
   }  
}

运行

podman run  --name nginx  -d -p 8080:80 -v /path/to/nginx.conf:/etc/nginx/nginx.conf:ro -v /home/user/project/dist:/usr/share/nginx/html:ro nginx

其中

/path/to/nginx.conf为配置文件的路径

/path/to/dist为vite build后的dist文件夹路径

然后浏览器访问localhost:8080即可

遇到的问题

运行Nginx后访问localhost:8080控制台报错：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

解决方法：

将vite配置文件中的build的值设为'./'即可