在 s-s-r 模式下发布我的 nuxtjs 网站时出错
Posted
技术标签:
【中文标题】在 s-s-r 模式下发布我的 nuxtjs 网站时出错【英文标题】:Errors when publishing my nuxtjs website on s-s-r mode 【发布时间】:2018-07-22 01:25:15 【问题描述】:我在尝试发布 nuxtjs 网站时遇到了一些问题。通常,我使用的是 generate 命令,但是对于这个我需要完全 s-s-r,所以我要使用 nuxt start。
但是在构建和启动应用程序之后,它变得一团糟。构建在控制台中完美运行,应用程序启动。问题是当我尝试访问该站点时,它会部分加载,但我在浏览器中遇到了所有这些错误:
manifest.3a7efd91c5f63f114507.js
Failed to load resource: the server responded with a status of 404 ()
vendor.7519259bf7bdf608079e.js
Failed to load resource: the server responded with a status of 404 ()
app.a5cb9356f53306f973dc.js
Failed to load resource: the server responded with a status of 404 ()
default.1f3ad14df16ee86595af.js
Failed to load resource: the server responded with a status of 404 ()
index.260dc65b69022a31ad58.js
Failed to load resource: the server responded with a status of 404 ()
/_nuxt/pages/spot/_slug.e57cc2e78d8e0b160fe7.js
Failed to load resource: the server responded with a status of 404 ()
manifest.3a7efd91c5f63f114507.js
Failed to load resource: the server responded with a status of 404 ()
default.1f3ad14df16ee86595af.js
Failed to load resource: the server responded with a status of 404 ()
index.260dc65b69022a31ad58.js
Failed to load resource: the server responded with a status of 404 ()
vendor.7519259bf7bdf608079e.js
Failed to load resource: the server responded with a status of 404 ()
app.a5cb9356f53306f973dc.js
Failed to load resource: the server responded with a status of 404 ()
在构建过程中似乎没有任何问题。当我使用 nuxt start 时,我得到了这个:
$ nuxt start
nuxt:axios BaseURL: http://localhost:3042/api (Browser: /api) +0ms
OPEN http://localhost:3042
这是我的服务器配置文件:
# Site global
server
listen 443 ssl http2;
server_name www.mywebsite.com;
access_log off;
location = /robots.txt access_log off; log_not_found off;
location = /favicon.ico access_log off; log_not_found off;
location /
proxy_pass http://127.0.0.1:3042/;
include /etc/nginx/conf.d/proxy.conf;
root /var/www/mywebsite/site;
add_header Access-Control-Allow-Origin *;
location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|txt|srt|swf)$
root /var/www/mywebsite/site/;
expires 30d;
ssl_certificate /etc/letsencrypt/live/www.mywebsite.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/www.mywebsite.com/privkey.pem;
# Redirection
server
listen 80;
server_name mywebsite.com www.mywebsite.com;
location /
return 301 https://www.mywebsite.com$request_uri;
还有我的 nuxt 配置文件:
const pkg = require('./package')
module.exports =
mode: 'universal',
loading: color: '#bb2b4d' ,
router:
linkActiveClass: '-active',
base: '/'
,
css: ['@/assets/icons/css/icons.css', '@/assets/snickles/snickles.css'],
plugins: ['~plugins/vue-filters.js', '~plugins/vue-modal.js'],
minify:
removeEmptyAttributes: false,
collapseWhitespace: true,
conservativeCollapse: true,
collapseBooleanAttributes: true,
removeTagWhitespace: false,
removeStyleLinkTypeAttributes: true
,
modules: [
'@nuxtjs/axios'
],
axios:
,
env:
api:
spots: `https://rest.mywebsite.com/spots`
,
proxy:
,
build:
extend(config, ctx)
// Run ESLint on save
if (ctx.isDev && ctx.isClient)
config.module.rules.push(
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
)
,
postcss: [require('autoprefixer')],
vendor: ['moment', 'vue-js-modal']
我忘了什么吗? 最奇怪的部分是,当我在自己的电脑上而不是在我的服务器上做同样的事情时,它工作得很好。我检查了 npm 和 node 版本,它们是相同的(最新的)。此外,如果使用 NuxtJS 的演示模板进行测试,它可以在完全相同的服务器配置下完美运行。
顺便说一下,服务器是 debian 8,所有软件包都是最新的。
提前感谢您的任何提示。
编辑:如果有任何用处,错误日志:
2018/02/14 19:12:54 [error] 12981#12981: *239930 open() "/var/www/mywebsite/site/_nuxt/pages/spot/_slug.e57cc2e78d8e0b160fe7.js" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx., server: www.mywebsite.com, request: "GET /_nuxt/pages/spot/_slug.e57cc2e78d8e0b160fe7.js HTTP/2.0", host: "www.mywebsite.com", referrer: "https://www.mywebsite.com/"
2018/02/14 19:12:57 [error] 12981#12981: *239930 open() "/var/www/mywebsite/site/_nuxt/manifest.3a7efd91c5f63f114507.js" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx, server: www.mywebsite.com, request: "GET /_nuxt/manifest.3a7efd91c5f63f114507.js HTTP/2.0", host: "www.mywebsite.com", referrer: "https://www.mywebsite.com/"
2018/02/14 19:12:57 [error] 12981#12981: *239930 open() "/var/www/mywebsite/site/_nuxt/vendor.7519259bf7bdf608079e.js" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx, server: www.mywebsite.com, request: "GET /_nuxt/vendor.7519259bf7bdf608079e.js HTTP/2.0", host: "www.mywebsite.com", referrer: "https://www.mywebsite.com/"
2018/02/14 19:12:57 [error] 12981#12981: *239930 open() "/var/www/mywebsite/site/_nuxt/app.a5cb9356f53306f973dc.js" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx, server: www.mywebsite.com, request: "GET /_nuxt/app.a5cb9356f53306f973dc.js HTTP/2.0", host: "www.mywebsite.com", referrer: "https://www.mywebsite.com/"
同样,它与其他具有类似配置的 nuxt 项目完美配合。事实上,它在这个文件夹中找不到这些文件,因为它们不在其中——这是完全正常的。由应用程序来获取这些文件的路由,它通常做得很好,具有相同的目录输出(正如我所说,它不应该在 _nuxt 文件夹中)。
谢谢。
【问题讨论】:
error_log 说明了什么? 你的意思是,nginx错误日志?没什么用,只是文件不存在,和控制台日志一样。它查看 .nuxt/ 目录中的这些文件,它们位于 .nuxt/dist/ (默认配置)中。但即使我复制了 .nuxt/ 目录中的文件,它也一直说无法访问它们。 LOL,所以,关于 nginx 在日志文件中查找这些文件的位置的有价值信息,而不是认为它应该查找的位置,并且您认为它“没有用”?!祝你好运!如果您没有此类信息,任何人都无法为您提供帮助! @cnst 好吧,我对此并不陌生。标题指的是 NuxtJS,而不是 Nginx,因为我知道问题不是来自我的 Nginx 配置,我在帖子中添加了该配置,以便从一开始就明确这一点。它与来自 NuxtJS 社区的演示模板完美搭配,输出完全相同(.nuxt 文件夹、内部的 dist 文件夹等),并且它运行良好,无需对我的 Nginx 配置进行任何更改。所以这是我的 NuxtJS 应用程序和/或配置的问题,与 Nginx 无关。 @cnst 但很公平,我已将日志添加到原始帖子中。如果它有助于您了解问题的根源,请告诉我。 【参考方案1】:这是用nginx
标记的,所以,这是解决问题的nginx方法。
通过 cmets 排除故障后,您报告在您的 error_log
中收到以下内容:
2018/02/14 19:12:57 [error] 12981#12981: *239930 open() "/var/www/mywebsite/site/_nuxt/manifest.3a7efd91c5f63f114507.js" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx, server: www.mywebsite.com, request: "GET /_nuxt/manifest.3a7efd91c5f63f114507.js HTTP/2.0", host: "www.mywebsite.com", referrer: "https://www.mywebsite.com/"
随后,运行 find / -type f -name manifest.3a7efd91c5f63f114507.js
或类似方法会导致相应文件位于 /var/www/mywebsite/site/.nuxt/dist
。
因此,你的 nginx 配置是错误的,因为你让它在不正确的文件夹中查找这些东西——你的配置有 root /var/www/mywebsite/site/;
。
正确的方法可能是使用基于前缀的location
和alias
指令:
location /_nuxt/
alias /var/www/mywebsite/site/.nuxt/dist/;
但是,如果 /_nuxt/
的内容可能必须被 proxy_pass
'ed 到上游,并且您想继续使用您在原始配置中已经拥有的基于 pcre 的 location
,那么像下面这样的 替代解决方案 也是一种选择(否则,您显然必须将其删除为多余的,以确保先前基于前缀的位置有效,请参阅 @ 987654323@):
location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|txt|srt|swf)$
rewrite ^/_nuxt(/.*) $1 break;
root /var/www/mywebsite/site/.nuxt/dist/;
【讨论】:
嗨!经过几次尝试,它可以工作……部分原因是它还在根目录中查找静态资产的文件。我终于在一个旧的、封闭的 github 问题中找到了原因。正如我所想,这完全是在 Nuxt 上:虽然“静态 spa 模式”完全可以毫不费力地工作,但“s-s-r”模式似乎几乎没有自动化......他们只是希望我们在服务器上构建然后上传某些文件夹和文件;文件和文件夹并非都在已构建的 dist 文件夹中找到。奇怪的是,这在任何地方都没有记录;这不是我所期望的。 但是由于您的回答可能是一个可行且简单的解决方法,因此请获得赏金奖励,以感谢您花时间研究问题。再次感谢!以上是关于在 s-s-r 模式下发布我的 nuxtjs 网站时出错的主要内容,如果未能解决你的问题,请参考以下文章
我应该使用哪一个:s-s-r、仅 SPA 或 SSG 用于我的 Nuxt 项目?
Nuxtjs 在 asyncData 中获取 Firestore 数据