Nuxt.js生产环境部署时出现静态文件404

zmisgod 发布于 2018-12-16 14:04:18 阅读 67 评论 0

发现问题

今天博客上线,后端我早早的就把代码布上去了,但是前端代码就没有这么顺利了。

nuxt.js的部署方式是这样的。

npm install
npm run build
npm start
pm2 start npm --name package-name  -- run start (pm2守护进程)

部署成功后,打开网站,发现页面的导航点击没有效果,于是我看了下审查元素,发现console出现大量的404的报错。

排查

此时我先用浏览器打开一个js的文件路径,报了404的错。

然后我又到了服务器上,看了下nginx的路径,发现当时我把root的地址指向了./nuxt/dist/目录下,我在到nuxt.js官网上看了下官方推荐的配置,没有配置这个root,应该是这个原因导致的。

修复

我于是把nginx配置修改成语官方一样的配置,如下:

server {
    listen       80;
    server_name  zmis.me;

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    #access_log  logs/host.access.log  main;

    index  index.html;
    location / {
        proxy_redirect                      off;
        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-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000;
    }
}

然后把nuxt.config.js中的build配置修改成

    buildDir: '_nuxt',
    build: {
      publicPath: '/_nuxt/dist/'
    },

然后重启nginx

nginx -s reload

再次npm start时,在服务器终端中curl 127.0.0.1:3000/mainfest.ssfsefas.js时,此时返回了js的内容,不会再报404了。

然后再次看下官网,此时就正常了。静态文件也就变成了类似https://zmis.me/_nuxt/manifest.aedff81d533153f1ec19.js