vue项目部署404总结🎨

🎨前言

不知道你们是不是经常说这样一句话，我本地都是好使的🤐，为什么打包之后就找不到页面呢？为什么找不到静态资源文件呢？为什么找不到public中的文件呢？😧我们会把这三个问题指给运维一口咬定是部署的问题，但其实确实有可能是咱们的问题哦🤦‍♂️

我们要明白一点，目前现在的开发都是前后端分离的模式🥞，我们每次打包之后的dist的文件夹是部署在nginx上，那就需要我们熟悉一下nginx的相关配置🍮

部署在域名的根路径上

Vue-cli是默认您部署在域名的根路径，publicPath无需设置

  • vue.config.js
    1
    2
    3
    4
    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      transpileDependencies: true,
    })
  • nginx.conf配置文件关键内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    server {
        listen       80;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            # 打包之后的文件路径
            root   E:\hsproject\mayor-daping-web\dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    部署在域名的子路径上

如果应用被部署在一个子路径上🥧，你就需要用这个选项指定这个子路径🍤。例如，如果你的应用被部署在https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

  • vue.config.js
    1
    2
    3
    4
    5
    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      transpileDependencies: true,
      publicPath: "/my-app",
    })
  • nginx关键配置文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    server {
        listen       80;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location /my-app {
            # 打包之后的文件路径
            root   E:\hsproject\mayor-daping-web\dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    重启nginx 访问ip:port/my-app发现返回的界面不是我的项目，可能其他小伙伴有可能是404👇。

针对这种问题基本上就是感觉路径没有找对需要我看了一下nginx location对应的文档发现了端倪

1
2
3
4
5
6
7
8
9
#若用alias的话，则访问127.0.0.1/img/目录里面的文件时，ningx会自去/var/www/image/目录找文件
location /img/ {
    alias /var/www/image/;
}

#若用root的话，则访问/127.0.0.1/img/目录下的文件时，nginx会自动去/var/www/image/img/目录下找文件
location /img/ {
    root /var/www/image;
}

因此有两种解决方案

  • 1.将root替换成alias
  • 2.在dist文件夹中增加my-app目录将打包的内容全部拷贝到my-app中

但是上面这种情况需要在vue.config.js中指定一下子路径的名称🥠，如果项目是我们自己部署就没关系了🍳，但是如果是后台部署的话出现404找不到文件的情况增加沟通的时间😌。

publicPath设置成相对路径部署在域名的子路径上

为了解决上面的问题我们可以把publicPath设置成相对路径./😊这样我们就不需要去管nginx部署在哪个目录下啦.👈。但是当我以为我要有所突破的时候测试部署的时候出现了这个问题控制台没有报错，页面。

可能是因为我使用的是histoty路由可能会对其有些影响🤔，于是我将路由模式修改为hash重新打包，部署成功🍺。

publicPath设置成相对路径部署在域名的根路径上

当history路由部署在根路径的时候是没有问题的。

当我在官网看到了这句话:👇

相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对publicPath也就是说history路由的时候尽量不要使用相对路径:

  • 当使用基于 HTML5 history.pushState 的路由时🎈；
  • 当使用 pages 选项构建多页面应用时🎈；

public中的文件

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。因为我们有时可能会修改对应的接口地址以及一些配置，所有我们不想让某些文件参与打包，方便我们在服务器上直接修改配置

  • public/configUrl.js
    1
    2
    3
    window.configInfo = {
      serverUrl: 'http://ip:port',
    };
  • 在index.html中引用configUrl.js
    1
    2
    <!-- 这部分要使用相对路径 如果使用的是绝对路径在部署到域名的子路径上会找不到该文件除非手动修改引用地址 -->
     <script type="text/javascript" src="./configUrl.js"></script>
  • 项目中使用
    1
    baseUrl = window.configInfo.xxx

总结

当初确实没有想到路由模式,配置publicPath,nginx配置三者来共同定位这个问题👓，希望在看到这篇文章的时候，不会在遇到部署404的情况🧶。

参考链接

技术
Vue Nginx

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！谢谢