我有一个我在本地主机上开发的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个文件中的一个或全部)的最佳方式(才能让它在子目录中工作)？
该应用程序的完整源代码在这里以防万一.
谢谢!
tre*_*gan 30
如果您使用的是React Router v4,则应该能够使用basename = { foobar} 进行设置.
<Router history={browserHistory} basename={'foobar'}>
<Route path="/" component={App} />
</Router>
链接到文档:https://reacttraining.com/react-router/web/api/BrowserRouter
注意:如果在子目录中使用create-react-app,您还需要"homepage": "/foobar/",在package.json文件中进行设置.因此,生产构建指向正确的道路.
Ray*_* Pk 11
<Router basename={'/directory-name'}>
<Route path='/' component={Home} />
</Router>
在 public/index.html 中添加 base。它有助于设置没有问题的路径。
<base href="%PUBLIC_URL%/">
使所有 css、js、图像和所有资源加载 './assets/your resource.'
仅查看是否使用历史记录。在历史中添加基本名称
const historyConfig = {
basename: 'your subdirectory'
};
const history = createBrowserHistory(historyConfig);
在我的情况下，我需要支持一个场景，其中可能有 0 到多个名称未知的子文件夹，并且生产仅使用静态文件。
在我的 App.js 中，我定义了这个简单的函数：
const getBasename = path => path.substr(0, path.lastIndexOf('/'));
我用来定义基本名称：
<Router basename={getBasename(window.location.pathname)}>
这适用于没有子文件夹以及许多子文件夹，它也可以管理重新加载。
var sourcePath = path.resolve(__dirname, 'src', 'index.js');
var buildPath = path.resolve(__dirname, 'vensa');
module.exports = {
entry: [sourcePath],
output: {
path: buildPath,
filename: '[name]-[hash].js',
hash: true
}
...
| 归档时间： |
|
| 查看次数： |
23567 次 |
| 最近记录： |