Question

我正在开发一个关于React的投资组合网站。

在开发服务器上开发网站时，我没有任何问题。。。直到我尝试以生产模式构建应用程序。

在节点开发服务器（localhost：8080）上一切正常，但是当我在本地服务器上打开dist / index.html（在localhost / website_2018 / dist / index.html上的沼泽）时，没有加载任何介质不再：该页面被我的应用视为空白页面（路由器中没有现有路径）。

我的网站位于子文件夹中：localhost / website_2018 /，但是我需要写完整的地址“ localhost / website_2018 / dist / index.html”才能在浏览器中打开它。之后，当我单击网站菜单的链接时，它将自动将我重定向到仅显示主页的“ localhost /”，但仍然没有媒体。

我认为问题来自我的webpack配置的公共路径。我在互联网上搜索了很多类似的问题，但没有找到有效的答复...

我想要的是将“ /”解释为“ localhost / website_2018 /”，而不仅仅是“ localhost”。我的应用程序中的所有文件和脚本都使用相对的“ /”来调用。

这是我的webpack配置：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.svg$/,
        exclude: /node_modules/,
        loader: 'svg-react-loader'
      }
    ]
  },
  resolve: {
    alias: {
       jquery: "jquery/src/jquery"
    },
    extensions: ['*', '.json', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: path.join(__dirname, "website_2018/"),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    historyApiFallback: true,
    hot: true
  }
};

以防万一，这是我的菜单链接：

            <div className="main">
                <Route render={({ location }) => (
                    <TransitionGroup>
                        <CSSTransition
                            key={location.key}
                            timeout={1500}
                            classNames="fade"
                        >
                            <Switch location={location}>
                                <Route exact path="/" component={HomePage}/>
                                <Route path="/projets" component={ProjectsPage}/>
                                <Route path="/contact" component={ContactPage}/>
                            </Switch>
                        </CSSTransition>
                    </TransitionGroup>
                )}/>
            </div>

有人可以帮我吗？

先谢谢您，

N。

React网站问题：在根“ localhost”上的相对路径重定向

0 个答案: