Почему происходит ошибка при загрузке ресурса? Реагировать приложение в подкаталог приложения Гэтсби - PullRequest
0 голосов
/ 18 января 2020

У меня проблемы с загрузкой ресурсов. Вот мои настройки:

  • Сервер 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/'),                                                                                                                                                         
    }                                                                                                                                                                                               
  },                                                                                                                                                                                                
...                                                                                                                                                                                                
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...