所以我正在开发一个电子学习应用程序。
昨天我手动配置了webpack
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
"targets": "defaults"
}],
'@babel/preset-react'
]
}
}]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "public", "index.html"),
}),
],
externals: {
"pdfjs-dist": "pdfjsLib",
"pdfjs-dist/build/pdf.worker.js": "pdfjsWorker"
}
}
extarnals的事情是显示一个自定义的PDF查看器。
现在在我的package.json中我有这个
"dev": "webpack-dev-server --config webpack.config.js --hot",
"build": "webpack",
而且它工作得很好,建设也很好,发展也很好。但是我有一个问题。
当我在屏幕上链接并刷新时,它显示:“http://localhost:8080/mijn-account”它给出错误“无法获取/mijn-account”
所以,然后我需要回到“http://localhost:8080/”,然后点击按钮,转到“http://localhost:8080/mijn-account”,然后我看到的变化.但它花费这么多时间.我需要做什么?
我已经尝试了一些东西与热的reloud,但我不明白它,当我保存的“mijn帐户”文件,它会自动刷新,所以这很好,但我怎么能解决这个错误?
2条答案
按热度按时间juud5qan1#
您的路由在生产版本中不起作用?如果是这样,问题不是在webpack中,而是在服务器的设置中。您需要配置服务器将所有页面重定向到index.html而不是
/something.html
。nginx示例:
vxbzzdmp2#
我观察到任何MUI组件在项目中使用,其中包含
href='/'
标签内<TextLink href="{Link}" />
.而不是尝试使用useNavigate钩子重定向链接,与webpack下devServer内的historyApiFallback:true
.这可能会解决问题谢谢