站长

webpack5搭建的vue3项目，配置publicPath后，使用history路由模式，出现了新问题——刷新不了，直接访问子路由也不行。
<img src="https://img.blogweb.cn/article/49bcc08363e9428e90db3f3157ad31c8.webp" loading="lazy" alt="【已解决】webpack5配置publicPath后，刷新页面404、白屏问题">
按照网上的方法加上了 <code>historyApiFallback: true</code>
<pre class="language-js line-numbers"><code>devServer: { 
 port: 5586, // 服务端口号
 compress: false, // gzip压缩,开发环境不开启,提升热更新速度
 hot: true, // 开启热更新
 historyApiFallback: true, // 解决history路由404问题
 static: {
 directory: path.join(__dirname, '../public'), //托管静态资源public文件夹
 
 },
 
 },
</code></pre>
重启，打开，刷新，变白屏了。。。
好吧，继续百度，
找到这个帖子
<a href="https://blogweb.cn/link?target=https://qa.1r1g.com/sf/ask/2608974371/" target="_blank" rel="nofollow noopener noreferrer">qa.1r1g.com/sf/ask/2608…</a>
<img src="https://img.blogweb.cn/article/6da62ea1165b4538b4c374487b4f82c8.webp" loading="lazy" alt="【已解决】webpack5配置publicPath后，刷新页面404、白屏问题">
依样画葫芦，我也改一改
<pre class="language-js line-numbers"><code>historyApiFallback: {
 index: '/catharsist/'
 }, // 解决history路由404问题
</code></pre>
居然好了！😄
又去翻了一下webpack5关于<code>historyApiFallback</code>的文档 <a href="https://blogweb.cn/link?target=https://webpack.docschina.org/configuration/dev-server#devserverhistoryapifallback" target="_blank" rel="nofollow noopener noreferrer">webpack.docschina.org/configurati…</a> 好像也没有这样的写法。
Anyway，解决我的问题，特此记录。

webpack5搭建的vue3项目，配置publicPath后，使用history路由模式，出现了新问题——刷新不了，直接访问子路由也不行。按照网上的方法加上了重启，打开，刷新，变白屏了。。。好吧，继续百度，找到这个帖子依样画葫芦，我也改一改居然好了！😄又去翻了一下webpack5关于的文档好像也没有这样的写法。Anyway，解决我的问题，特此记录。