在 SSR 模式下发布我的 nuxtjs 网站时出错
Errors when publishing my nuxtjs website on SSR mode
我在尝试发布 nuxtjs 网站时遇到了一些问题。通常，我使用的是 generate 命令，但是对于这个，我需要使用完整的 SSR，所以我打算使用 nuxt 启动。
但是在构建并启动应用程序之后，它变得一团糟。构建在控制台中完美进行，应用程序启动。问题是当我尝试访问该站点时，它加载了部分内容，但我在浏览器中遇到了所有这些错误：
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 和节点版本，它们是相同的（最新的）。此外，如果使用 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 文件夹中） .
谢谢。
这是用 nginx 标记的，所以，这是解决问题的 nginx 方法。
通过评论进行故障排除后，您报告在 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/;。
正确的方法可能是将prefix-basedlocation与[=23一起使用=] 指令：
location /_nuxt/ {
alias /var/www/mywebsite/site/.nuxt/dist/;
}
但是，如果 /_nuxt/ 有可能需要 proxy_pass 上传到上游的东西，并且您想继续使用 pcre-based location you already have had in your original config, then an alternative solution like below is also an option (otherwise, you obviously would have to remove it as redundant, to make sure that the prior prefix-based location works, see http://nginx.org/r/location):
location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|txt|srt|swf)$ {
rewrite ^/_nuxt(/.*) break;
root /var/www/mywebsite/site/.nuxt/dist/;
}
我在尝试发布 nuxtjs 网站时遇到了一些问题。通常，我使用的是 generate 命令，但是对于这个，我需要使用完整的 SSR，所以我打算使用 nuxt 启动。
但是在构建并启动应用程序之后，它变得一团糟。构建在控制台中完美进行，应用程序启动。问题是当我尝试访问该站点时，它加载了部分内容，但我在浏览器中遇到了所有这些错误：
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 和节点版本，它们是相同的（最新的）。此外，如果使用 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 文件夹中） .
谢谢。
这是用 nginx 标记的，所以，这是解决问题的 nginx 方法。
通过评论进行故障排除后，您报告在 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/;。
正确的方法可能是将prefix-basedlocation与[=23一起使用=] 指令：
location /_nuxt/ {
alias /var/www/mywebsite/site/.nuxt/dist/;
}
但是，如果 /_nuxt/ 有可能需要 proxy_pass 上传到上游的东西，并且您想继续使用 pcre-based location you already have had in your original config, then an alternative solution like below is also an option (otherwise, you obviously would have to remove it as redundant, to make sure that the prior prefix-based location works, see http://nginx.org/r/location):
location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|txt|srt|swf)$ {
rewrite ^/_nuxt(/.*) break;
root /var/www/mywebsite/site/.nuxt/dist/;
}