如何将 React 应用程序捆绑到服务器上的子目录中?

2024-02-29

我有一个在本地主机上开发的 React 应用程序。我想将其复制到服务器上名为 vensa 的子目录中。

我的 webpack 配置文件看起来像这样..

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: 'build',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css!sass')
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css')
      },
      {
        test: /\.(png|eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
        loader: 'url'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('vensa-dashboard.css')
  ],
  devServer: {
    historyApiFallback: true,
    contentBase: './build'
  }
};

index.html 文件看起来像这样......

<!DOCTYPE html>
<html>
<head>
  <title>Vensa Development Test</title>
  <link rel="stylesheet" href="/vensa-dashboard.css">
</head>
<body>
  <div class="container"></div>
  <script src="/bundle.js"></script>
</body>
</html>

我的routes.js 文件是...

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import VensaDashboard from './components/VensaDashboard';
import Inbox from './components/Inbox';
import Todo from './components/Todo';
import Home from './components/Home';

export default (
  <Route path="/" component={VensaDashboard}>
    <IndexRoute component={Home} />
    <Route path="/message" component={Inbox} />
    <Route path="/todo/:todoPage" component={Todo} />
  </Route>
);

但是,如果我只是跑webpack -p并将这 3 个文件复制到该子目录中,它不起作用,因为根路径是/并且找不到js和css文件。我不确定要更改什么(最好的方法)(可能是这 3 个文件中的一个或全部)以使其在子目录中工作?

该应用程序的完整源代码是here https://github.com/magician11/vensa-test如果有帮助的话。

Thanks!


如果您使用的是 React Router v4,您应该能够使用 basename={ 设置它foobar}.

<Router history={browserHistory} basename={'foobar'}>
  <Route path="/" component={App} />
</Router>

链接到文档:https://reacttraining.com/react-router/web/api/BrowserRouter https://reacttraining.com/react-router/web/api/BrowserRouter

注意:如果使用创建反应应用程序 https://github.com/facebookincubator/create-react-app在子目录中,您还需要设置"homepage": "/foobar/",在你的 package.json 文件中。因此,生产构建指向正确的道路。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 React 应用程序捆绑到服务器上的子目录中? 的相关文章

随机推荐

  • Xcode 6 AFURLRequestSerialization 中的自动合成错误

    如何修复我在 Xcode 6 beta 上使用最新 AFNetworking 获得的属性streamStatus和streamError的警告 自动属性合成不会合成 因为它是可读写的 但它将通过另一个属性只读合成 https github
  • 使用 MiniProfiler 进行直接 ADO.net 调用

    对于那些 C 和分析器极客来说 这个问题很愚蠢 我是 C 新手 基本上是 C 开发人员 如果使用的话我可以分析数据库查询dbproviderfactory 但我无法在直接使用 ado net 调用时分析它 原始SqlConnection S
  • GlobalSession 范围的 beans 是否从 spring 5 中删除了?为什么?

    1 Spring 5 中是否删除了全局会话范围的 beans 官方文档不再提及 SCOPE GLOBAL SESSION 不再是 RequestAttributes 的一部分 春季 4 https docs spring io autore
  • 无法在 OSX yosemite 上构建 Java 项目

    我被以下错误阻止 com sun tools javac util Context put Ljava lang Class Ljava lang Object V 这是完整的跟踪 project git master gradle jar
  • Ruby 中的计时器性能

    我正在寻找一个演示 ruby 计时器的在线示例 并发现了下面的代码 它按预期工作 但是这个简单的程序使用 30Mo 内存 如 Windows 任务管理器中所示 和太多的 CPU 有意义吗 多谢 def time block start ti
  • 选择 pandas 中多索引列的子级别

    我生成一个像这个例子一样的多索引数据框 import pandas as pd import numpy as np iterables co1 co2 co3 co4 age weight multi pd MultiIndex from
  • 如何强制依赖项包含具有特定版本号的工件

    尝试使用 Maven 构建 GWT 项目时出现此错误 您的项目声明对 gwt user 2 6 0 的依赖 这个插件是 至少为 gwt 版本 2 7 0 设计 我发现 gwt user 2 6 0 是通过 com google gwt ev
  • ScanResult 功能解读

    我想分析 ScanResult 的功能字符串 但是 名称最多分组在四个方括号中 例如 WPA PSK TKIP CCMP WPA2 PSK TKIP CCMP WPS ESS 考虑到某些名称可能出现在不同的括号中 是否有某种文档描述哪个括号
  • 当用户删除 .app 时,卸载该 .app 安装的项目,包括 SMJobBless 助手

    简短版本 是否可以删除应用程序设置的帮助工具 SMJobBless 等 当应用程序被删除时 如果是这样 怎么办 长版本 不幸的是 我们正在开发的Mac应用程序需要管理员权限才能执行偶尔的操作 并且即使应用程序本身没有运行 它也需要一个后台任
  • 如何在android中使用textView进行页面卷曲?

    我发现了很好的 harism 项目 它可以实现漂亮的分页效果 如以下链接https github com harism android page curl https github com harism android page curl
  • 在子菜单qt中创建滚动条?

    我有一个地图应用程序和一个子菜单 其中动态添加的对象 即地图上的点 添加到子菜单中 具体取决于加载的图层 我可以通过单击相应的子菜单项来隐藏每个单独的对象 即一个点 有什么办法可以组织子菜单吗 当有很多点 即 100 时 整个子菜单会占据屏
  • 在 Oracle 数据库中使用 JdbcTemplate 插入时间戳 (ORA-01858)

    我已经阅读了很多有关此错误的内容 但仍然没有发现错误 我正在使用 JdbcTemplate 在某个带有时间戳列的表中插入一行 我很确定时间戳是问题所在 就好像从插入中删除它工作正常一样 My code private static fina
  • 如何将SVN中的分支与所有提交历史合并回主干?

    如何将SVN中的分支与所有提交历史合并回主干 我知道在 Git 中我可以使用 merge squash SVN中有类似的命令吗 我使用的是SVN 1 6 对于 Subversion 1 5 或更高版本 合并记录在本地工作副本的 svn me
  • Python中的嵌入层:如何正确使用Torchsummary?

    这是一个最低限度工作 可重现的示例 import torch import torch nn as nn from torchsummary import summary class Network nn Module def init s
  • Django OperationalError:没有这样的列:在 pythonanywhere 上

    首先 我能够修复导入错误 我发现这是因为pythonanywhere的Django版本没有更新 所以我将pythonanywhere上的Django从1 x x升级到2 0 9 错误是这样的 导入错误 无法导入名称 路径 django ve
  • 调用未定义的函数 ssh2_connect()

    connection ssh2 connect SFTP SERVER 22 ssh2 auth password connection SFTP USERNAME SFTP PASSWORD sftp ssh2 sftp connecti
  • 如何比较 Joda DateTime 对象与可接受的偏移量(容差)?

    我想知道有没有标准的APIJodaTime比较 2DateTime具有指定公差的物体 我正在寻找一种最好使用的单线Joda标准API 不适用于时间算术表达式 例如这个帖子 https stackoverflow com questions
  • 将变量从 PHP 传递到 Smarty

    我有两个脚本 一个在 php 中 一个在 tpl 中 我需要将 php 中的变量传递给 tpl 我尝试了这个 但没有任何作用 但不知何故 它可以工作一两天 然后 显示空白 如果我创建另一个PHP脚本只是为了回显变量 它起作用了 PHP代码
  • Angular2 - 带有语言的路线

    您好 我想使用以下格式的语言创建路线 www domain com lang sometimes Example www domain com en sometimes www domain com de sometimes 是否可以编写类
  • 如何将 React 应用程序捆绑到服务器上的子目录中?

    我有一个在本地主机上开发的 React 应用程序 我想将其复制到服务器上名为 vensa 的子目录中 我的 webpack 配置文件看起来像这样 const ExtractTextPlugin require extract text we