У меня проблемы с загрузкой ресурсов. Вот мои настройки:
Сервер Apache2, на котором размещен mywebpage.com в каталоге / var / mywebpage / www /
Gatsby JS веб-приложение развернуто в / var / mywebpage / www /
- Я создаю фиктивные страницы в gatsby для своих подпроектов.
Реагирует веб-приложение (Webpack4), развернутое в / var / mywebpage / www/projects/my-subproject-example/
- Содержит
index.html и main.js файл
Проблема в том, что React Веб-приложение не работает должным образом в подкаталоге. Веб-приложение React работает правильно, если развернуто в основной каталог / var / mywebpage / www. Ресурсы, похоже, были получены правильно: GET: /projects/my-subproject-example [200], GET: /projects/my-subproject-example/main.js [200]. Ресурсы также правильно отображаются в отладчике веб-консоли.
Ниже приведены соответствующие части gatsby- node.js и webpack.config. js:
//gatsby-node.js
...
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
const blogPost = path.resolve(`./src/templates/blog-post.js`)
const projectPage = path.resolve(`./src/templates/project-page.js`)
return graphql(
`
{
allMdx(
sort: { fields: [frontmatter___date], order: DESC }
limit: 1000
) {
edges {
node {
fields {
slug
parentDir
}
frontmatter {
title
}
}
}
}
}
`
).then(result => {
if (result.errors) {
throw result.errors
}
// Create blog posts pages.
const posts = result.data.allMdx.edges
posts.forEach((post, index) => {
const previous = index === posts.length - 1 ? null : posts[index + 1].node
const next = index === 0 ? null : posts[index - 1].node
if (post.node.fields.parentDir === 'projects') {
createPage({
path: `projects${post.node.fields.slug}`,
component: projectPage,
context: {
slug: post.node.fields.slug,
previous,
next,
},
})
} else {
createPage({
path: `blog${post.node.fields.slug}`,
component: blogPost,
context: {
slug: post.node.fields.slug,
previous,
next,
},
})
}
})
return null
})
}
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === `Mdx`) {
let value = createFilePath({ node, getNode })
const dirPath = node.fileAbsolutePath.split('/');
const parentDir = dirPath[dirPath.length - 3];
createNodeField({
name: `slug`,
node,
value,
})
createNodeField({
name: `parentDir`,
node,
value: `${parentDir}`,
})
}
}
...
//webpack.config.js
...
module.exports = {
mode: 'development',
resolve: {
extension: ['.js', '.jsx']
},
devtool: 'source-map',
module: {
rules: [
{
// Compile ES2015 using babel
test: /\.js$/,
include: [path.resolve('.')],
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: BABEL_CONFIG
}
]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: "[name]_[local]_[hash:base64]",
},
sourceMap: true,
//minimize: true,
import: true,
importLoaders: 1,
}
}
]
}
]
},
resolve: {
extensions : ['.js', '.jsx'],
alias: {
'@': path.resolve(__dirname, 'src/'),
}
},
...