我最近将HashRouter转换为BrowserRouter,因为它在开发环境中运行良好,因为我添加了
devServer: {
historyApiFallback: true,
allowedHosts: 'all',
},
字符串
到webpack.dev.config
当我在prod上运行应用程序时,myapp.com可以工作,但myapp.com/home无法工作(它会呈现nginx 404错误)。
如果我去myapp.com/#/home,那么它会将我重定向到myapp.com/home,页面将呈现(我有catch all逻辑将传统哈希转换为正常的url)。
这里是我的完整的webpack配置。
webpack.common.js
module.exports = {
entry: path.join(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].js',
publicPath: '/',
hashFunction: 'xxhash64',
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
{
// inject CSS to page
loader: 'style-loader',
},
{
// translates CSS into CommonJS modules
loader: 'css-loader',
},
{
// Run postcss actions
loader: 'postcss-loader',
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [require('autoprefixer')]
},
},
},
},
{
// compiles Sass to CSS
loader: 'sass-loader',
},
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]',
},
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [['autoprefixer', {}]],
},
},
},
],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' },
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
filename: 'index.html',
inject: 'body',
favicon: './public/favicon.ico',
manifest: './public/manifest.json',
}),
],
}
型
webpack.prod.js
module.exports = merge(common, {
mode: 'production',
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000,
},
plugins: [
new Dotenv({
path: './.env',
}),
],
})
型
我错过了什么?
编辑
myapp.com工作,但如果我想导航到myapp.com/intro,它会给予我ngnix 404。
1条答案
按热度按时间wnvonmuf1#
这是因为,你的路由是你的网站内部的,服务器(Nginx)不会知道为这些内部路由提供什么文件。
您的服务器知道URL“myapp.com”必须提供“index.html”,但不知道在其他URL如“myapp.com/home”的情况下提供什么文件,因此它返回“404.html”,这是默认的nginx配置。
需要在部署配置中明确提及这些路由。比如,你必须更新nginx配置,为所有以“www.example.com”开头的URL提供“index.htmlmyapp.com”
它在HashRouter中工作,因为服务器不会解析“#”之后的URL,所以对于服务器
myapp.com/#/home
和myapp.com/#/
是相同的。服务器提供index.html
,然后您的HashRouter解析'#'后的URL并相应地提供内容