Vue3项目打包发布nginx服务器（windows）

最新推荐文章于 2025-12-18 14:11:16 发布

原创最新推荐文章于 2025-12-18 14:11:16 发布 · 842 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #服务器 #windows #vue.js

本文详细介绍了如何通过配置Nginx和Vite的base设置，实现在发布项目时仅需复制文件到指定目录，通过指定URL访问。重点讲解了vite.config.js的base配置和nginx的server配置，以及可能出现的问题解决方法。

实现只需要配置一次nginx，今后发布项目只需要把打包文件复制粘贴到指定目录即可，通过"http://域名:端口号/文件夹名 "即可访问到新发布项目

我这里直接跳过nginx安装教程了，只记录nginx怎么配置的和vite.config.js配置注意事项

打包

在vite.config.js文件里面加上base的配置项，路径一定要和放到服务器的文件夹名（即最后访问的路径）一致
不配置会导致页面发布到服务器后找不到静态文件而出现空白页

export default defineConfig({
  base:'/dist', //要和服务器上的文件夹名（访问路径）一致
})

nginx配置

找到nginx配置文件，路径为 nginx安装目录/conf/nginx.conf
修改配置，给配置文件添加一下配置

http {
  # ...其他配置...

  server {
    listen 8888;
    # 端口
    server_name localhost;

    root G:/it/nginx-1.24.0/nginx-1.24.0/app;
    # root值为你发布项目的目录
    location / {
      try_files $uri $uri/ /index.html;
      # try_files指令会依次尝试请求的文件路径，如果找不到对应的文件，则会重定向到index.html。这样，当访问任何路由时，Nginx会将请求转发到index.html，然后Vue Router会接管处理路由。
    }
  }
}

启动Nginx

在安装目录打开cmd，输入Nginx启动命令

start nginx

项目放到服务器

把打包好的dist文件放到发布项目的目录，我的是G:/it/nginx-1.24.0/nginx-1.24.0/app，根据你配置的值，配置哪个目录就放哪个目录

然后把dist文件名改为你最后想要访问的路径，我最后想通过“/dist”路径访问，所以我就不改了

验证

我配置的端口是8888，文件名为dist，所以可以通过http://localhost:8888/dist/访问到项目

总结

以后发布项目就不需要再改nginx配置文件了，只需要把打包后的文件放到服务器的指定目录，修改个名字就可以访问了。
注意点：

如果出现空白页但是网页title出来了，这是静态文件没有访问到。需要检查一下vite.config.js配置文件的base是不是和文件名一致
如果出现404，路径配置有问题，检查一下root