vite2.0+vue3.2部署404问题

小袁学编程01

已于 2022-03-23 13:58:04 修改

阅读量6k

点赞数

文章标签： nginx vue

于 2022-03-23 13:45:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38712009/article/details/123683951

版权

本文主要讨论了vite2.0与vue3.2项目在部署到nginx服务器后，遇到页面刷新404的问题。在vue2项目中，此问题通常可以解决，但在vue3项目中，由于alias配置或proxy代理的改变，可能导致打包后的文件路径问题。解决方案包括检查和调整nginx的配置以正确代理请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vite2.0+vue3.2 打包后放在nginx上刷新页面404问题

vite2.0+vue3.2 项目在本地运行没问题，扔到服务器上刷新之后页面404

server
{
    listen 80;
    index index.html;
    root /xxxx/dist;

    #vue-router配置
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
}

以上方法适用于vue2

vue3项目如下配置 alias 直想打包后的文件夹

server {
    listen 4000;
    location / {
        autoindex on;  # 不开启试用alias会403
        alias  /xxxx/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
    # .... 其他配置
}

接口404

vue项目在vue.config.js中设置的有proxy跨域代理，在本地运行没有问题，但是放在服务器上就成了404，可能是打包后vue.config.js中的代理失效，以ngxin的代理为准
vue.config.js配置了proxy代理

// vite 相关配置
    server: {
   
      port: 80,
      host: true,
      open: true,
      proxy: {
   
        '/system': {
   
          target: env.VITE_APP_BASE_API,
          c