使用Webpack构建应用后,React Routes不起作用

阿伦·D

使用Webpack构建应用后,React Routes不起作用

当我使用Webpack服务器运行应用程序时,路由工作正常(npm start)

webpack.config文件

var webpack = require('webpack');

module.exports = {
    entry: {
        'index': [
            'webpack-dev-server/client?http://localhost:8080/',
            'webpack/hot/only-dev-server',
            './index.jsx'
        ]
    },
    output: {
        path: __dirname,
        filename: "[name].js",
        publicPath: 'http://localhost:8881/',
        chunkFilename: '[id].chunk.js',
        sourceMapFilename: '[name].map'
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.es6'],
        modulesDirectories: ['node_modules']
    },
    module: {
        loaders: [
            {test: /\.jsx$|\.es6$|\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/},
            {test: /\.scss$|\.css$/, loader: 'style-loader!style!css!sass'}
        ]
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ],
    devtool: "eval-source-map",
    devServer: {
        port: 8080,
        historyApiFallback: {
            index: '/'
        }
    },
    externals: {
        'Config': JSON.stringify({
            serverUrl: "http://pss/",
            authSuccessUrl: "http://localhost:8881/loginSuccess",
            podioClientId: "property-seller-solutions"
        })
    }
};

package.json文件:

{
  "name": "pss",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --hot --port 8080"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "devDependencies": {
    "babel": "~6.5.2",
    "babel-core": "~6.9.1",
    "babel-loader": "~6.2.4",
    "babel-preset-es2015": "~6.9.0",
    "babel-preset-react": "~6.5.0",
    "babel-preset-stage-0": "~6.5.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-html-replace": "^1.6.1",
    "gulp-react": "^3.1.0",
    "gulp-uglify": "^1.5.4",
    "history": "~3.0.0",
    "react": "~15.1.0",
    "react-dom": "~15.1.0",
    "react-hot-loader": "~1.3.0",
    "webpack": "~1.13.1",
    "webpack-dev-server": "~1.14.1"
  },
  "dependencies": {
    "chart.js": "^2.1.6",
    "connect-history-api-fallback": "~1.2.0",
    "halogen": "^0.2.0",
    "highcharts": "^4.2.5",
    "react-d3-basic": "^1.6.11",
    "react-infinite-scroll-component": "^1.4.1",
    "react-infinite-scroll-es2015": "^1.0.0"
  }
}

.htaccess文件:

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

构建应用程序(webpack --hot --inline)后,获得了两个输出文件-index.js和index.html

我将两个文件和.htaccess文件复制到了我的本地主机根文件夹中。

索引路由工作正常。.(http:// localhost),但是当我尝试重定向到http:// localhost / home时,它显示“ 404 Not Found”错误(在此未找到所请求的URL / home服务器。)

当我使用Webpack服务器运行应用程序时(npm start),这些路由正常工作-http:// localhost:8080 / home

阿伦·D

辛苦了

使用以下.htaccess代码:

RewriteEngine On  
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]

并使用以下终端命令使用webpack构建项目:

webpack --inline --history-api-fallback --progress -p

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用Webpack构建应用后,React Routes不起作用

来自分类Dev

React Router Routes 在部署到 Heroku 时不起作用

来自分类Dev

使用Phonegap构建Angular应用程序不起作用

来自分类Dev

phonegap构建不起作用

来自分类Dev

快速构建不起作用

来自分类Dev

phonegap构建不起作用

来自分类常见问题

webpack命令不起作用

来自分类Dev

使用mshtml不起作用

来自分类Dev

使用mshtml不起作用

来自分类Dev

hasClass不起作用后的removeClass

来自分类Dev

在ChangeType不起作用后比较值

来自分类Dev

hasClass不起作用后的removeClass

来自分类Dev

jQuery scrolltop-首次使用后不起作用

来自分类Dev

使用React 0.59但挂钩不起作用

来自分类Dev

推断-Gradle构建不起作用

来自分类Dev

getJSON在phonegap构建上不起作用

来自分类Dev

Phonegap构建-Javascript不起作用

来自分类Dev

Orbeon 从源代码构建不起作用

来自分类Dev

带有icomoon的webpack不起作用

来自分类Dev

导出默认不起作用的webpack,reactjs

来自分类Dev

webpack导入firebase不起作用

来自分类Dev

内联的Webpack JS文件不起作用

来自分类Dev

字体真棒不起作用的webpack

来自分类Dev

字体真棒不起作用的webpack

来自分类Dev

内联的Webpack JS文件不起作用

来自分类Dev

Webpack-源地图不起作用

来自分类Dev

Webpack中的动态需求不起作用

来自分类Dev

Webpack CLI在项目中不起作用

来自分类Dev

Webpack 和 TypeScript CommonsChunkPlugin 不起作用