Возникла проблема с моим приложением Nuxt, когда оно не отображало страницы, посещенные по ссылке, без обновления браузера вручную после размещения на Netlify. У него не было проблем с локальной разработкой, но после нажатия на ссылку страница 404 загружается и в консоль входит сообщение «Не удалось загрузить ресурс: net :: ERR_CONNECTION_REFUSED». Это мой первый опыт работы с Nuxt, и я бился головой, пытаясь понять, что мешает странице загружаться.
nuxt.config. js:
require("dotenv").config();
import colors from "vuetify/es5/util/colors";
const path = require("path");
import axios from "axios";
const collect = require("collect.js");
export default {
mode: "universal",
/*
** Headers of the page
*/
head: {
titleTemplate: "%s - " + process.env.npm_package_name,
title: process.env.npm_package_name || "",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{
hid: "description",
name: "description",
content: process.env.npm_package_description || ""
}
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
},
/*
** Customize the progress-bar color
*/
loading: { color: "#92C83E" },
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
plugins: ["~/plugins/filters.js"],
/*
** Nuxt.js dev-modules
*/
buildModules: ["@nuxtjs/vuetify"],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
"@nuxtjs/axios",
["@nuxtjs/dotenv", { systemvars: true }]
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
customVariables: ["~/assets/variables.scss"],
theme: {
dark: true,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
generate: {
routes: async () => {
let { data } = await axios.post(
process.env.POSTS_URL,
JSON.stringify({
filter: { published: true },
sort: { _created: -1 },
populate: 1
}),
{
headers: { "Content-Type": "application/json" }
}
);
const collection = collect(data.entries);
let tags = collection
.map(post => post.tags)
.flatten()
.unique()
.map(tag => {
let payload = collection
.filter(item => {
return collect(item.tags).contains(tag);
})
.all();
return {
route: `category/${tag}`,
payload: payload
};
})
.all();
let posts = collection
.map(post => {
return {
route: `blog/${post.title_slug}`,
payload: post
};
})
.all();
return posts.concat(tags);
}
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {}
}
};
_redirects:
/* /index.html 200
Репозиторий Github: https://github.com/huntertrammell/techaccess Развертывание Netlify: https://techaccess.netlify.com/