2017-04-18 9 views
1

私はここで、スタックオーバーフローで私のファーに頼みます。私が反応して反応-ルータで働いていますが、私はクロームに次のエラーを持っている:リアクションルータ^ 2.4.0エラー。親戚ルートは要素を見つけられません

GET http://localhost:3000/alumno/src/fonts/awesome/css/font-awesome.css

ルートがある:http://localhost:3000/alumno/inicio

ルートは次のようになり場合:http://localhost:3000/inicio。すべてのソースが正しく読み込まれていて問題はありません。ローカルホスト(http://localhost:3000/XXX/YYY)の後に複数の子があると問題が発生します。私のファイル構造は:Folder_PUBLIC>(Index.html; Index.js Folder_SRC>(すべて私のsrcs))です。私は常に最後の子供からソースを読み込もうとしているのを見ている。したがって、このフォルダは存在しません。私はIndex.htmlで定義したように、ルートからソースをロードすることができます。私はあなたに私のファイルを表示:

INDEX.HTML

'use strict'; 
var CopyFiles = require('copy-webpack-plugin'); 
module.exports = { 
resolve: { 
    extensions: ['', '.js', '.jsx'] 
}, 
context: __dirname, 
entry: { 
    app: ['./src/index.jsx'] 
}, 
output: { 
    path: './public', 
    filename: 'index.js' 
    /*, 
    publicPath: '/' 
    */ 
}, 
devServer: { 
    host: 'localhost', 
    port: 3000, 
    inline: true, 
    historyApiFallback: true 
}, 
module: { 
    loaders: [ 
     { 
      test: /(\.js|.jsx)$/, 
      loader: 'babel', 
      query: { 
       "presets": [ 
        "es2015", 
        "react", 
        "stage-0" 
       ], 
       "plugins": [ 
        "react-html-attrs", 
        "transform-decorators-legacy", 
        "transform-class-properties" 
       ] 
      } 
     }, 
     { 
      test: /\.css?$/, 
      loaders: [ 
       'style', 
       'css' 
      ] 
     } 
    ] 
}, 
plugins: [ 
    new CopyFiles([ 
     { 
      from: './src/index.html', 
      to: './' 
     }, 
     { 
      from: './node_modules/bootstrap/dist/js/bootstrap.js', 
      to: './src/js' 
     }, 
     { 
      from: './node_modules/jquery/dist/jquery.js', 
      to: './src/js' 
     }, 
     { 
      from: './node_modules/select2/dist/js/select2.js', 
      to: './src/js' 
     }, 
     { 
      from: './node_modules/bootstrap/dist/css/bootstrap.css', 
      to: './src/css' 
     }, 
     { 
      from: './node_modules/select2/dist/css/select2.css', 
      to: './src/css' 
     }, 
     { 
      from: './src/styles/index.css', 
      to: './src/css' 
     }, 
     { 
      context: './node_modules/bootstrap/dist/fonts', 
      from: '**/*', 
      to: './src/fonts' 
     }, 
     { 
      context: './src/fonts', 
      from: '**/*', 
      to: './src/fonts' 
     }, 
     { 
      context: './src/images', 
      from: '**/*', 
      to: './src/images' 
     } 
    ]) 
] 

}

私のブートストラップ、jQueryの、...が純粋である

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <meta charset="UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/> 
    <link rel="icon" type="image/ico" href="./src/images/icono.ico"/> 
    <title>Universidad Politécnica de Cartagena</title> 
    <link rel="stylesheet" type="text/css" href="./src/fonts/awesome/css/font-awesome.css"/> 
    <link rel="stylesheet" type="text/css" href="./src/css/bootstrap.css"/> 
    <link rel="stylesheet" type="text/css" href="./src/css/select2.css"/> 
    <link rel="stylesheet" type="text/css" href="./src/css/index.css"/> 
</head> 
<body> 
    <div id="idRoot" class="container"></div> 
    <script type="text/javascript" src="./src/js/jquery.js"></script> 
    <script type="text/javascript" src="./src/js/bootstrap.js"></script> 
    <script type="text/javascript" src="./src/js/select2.js"></script> 
    <script src="./index.js"></script> 
</body> 
</html> 

WEBPACK.CONFIF.JS、私はそれをReactにインポートせず、React-Bootstrapなどを使用しません。

ありがとう。

答えて

1

静的リソース(CSSおよびJS)へのリンクは、すべて現在のページのURLからの相対的なものです。 URLを絶対にすることで問題を解決してください。最初にドットを削除するだけです:

<link rel="stylesheet" type="text/css" href="/src/fonts/awesome/css/font-awesome.css"/> 
+0

ありがとうございます!それは解決される! – JuMoGar

関連する問題