vue2打包部署到nginx，解决路由history模式下页面空白问题
<p>项目使用的是vue2，脚手架vue-cli 4。</p><p>需求：之前项目路由使用的是hash，现在要求调整为history模式，但是整个过程非常坎坷，遇到了页面空白问题。现在就具体讲一下这个问题。</p>
<p>首先，直接讲路由模式由hash改为了history。</p>
<p><img src="https://image0219.oss-cn-hangzhou.aliyuncs.com/images/image-20240904163656543.png" alt="image-20240904163656543" loading="lazy"></p>
<p>在vue.config.js中的配置</p>
<p><img src="https://image0219.oss-cn-hangzhou.aliyuncs.com/images/image-20240904163743339.png" alt="image-20240904163743339" loading="lazy"></p>
<p>然后直接进行打包。</p>
<p>nginx的配置：</p>
<p><img src="https://image0219.oss-cn-hangzhou.aliyuncs.com/images/image-20240904170524090.png" alt="image-20240904170524090" loading="lazy"></p>
<p>此时，启动nginx，访问项目<code>http://localhost:8000/</code>。因为我在项目的路由中配置了重定向，所以重定向到了<code>jTlist</code>页面。</p>
<p><img src="https://image0219.oss-cn-hangzhou.aliyuncs.com/images/image-20240904170457396.png" alt="image-20240904170457396" loading="lazy"></p>
<p>此时，又来了一个新的需求！需有增加一个路由前缀，不能够直接访问<code>/</code>。</p>
<p>于是，我在增加了如下路由配置：</p>
<p><img src="https://image0219.oss-cn-hangzhou.aliyuncs.com/images/image-20240904165144039.png" alt="image-20240904165144039" loading="lazy"></p>
<p>其他位置及nginx未做改动。</p>
<p>重新打包。</p>
<p>然后访问<code>http://localhost:8000/aichat</code>，成功访问，并成功重定向到<code>/jTlist</code>。</p>
<p><img src="https://image0219.oss-cn-hangzhou.aliyuncs.com/images/image-20240904165256797.png" alt="image-20240904165256797" loading="lazy"></p>
<blockquote>
<p>此时，问题来了！！点击刷新。</p>
</blockquote>
<p><img src="https://image0219.oss-cn-hangzhou.aliyuncs.com/images/image-20240904165352958.png" alt="image-20240904165352958" loading="lazy"></p>
<p>页面空白，控制台出现了两个错误。</p>
<p>点开错误信息，看了一下，提示<code>We're sorry but xx doesn't work properly without JavaScript enabled. Please enable it to continue.</code></p>
<p>个人理解的意思是好像什么js未加载进来。于是，我点开Network，看一下对js文件的请求是否有问题。</p>
<p><img src="https://image0219.oss-cn-hangzhou.aliyuncs.com/images/image-20240904165710553.png" alt="image-20240904165710553" loading="lazy"></p>
<p>找到了问题所在，</p>
<p>它本应访问的路径是<code>http://localhost:8000/aichat/static/js/chunk-vendors.21d24282.js</code>，结果访问了<code>http://localhost:8000/aichat/aichat/static/js/chunk-vendors.21d24282.js</code>。</p>
<p>该问题困扰了很长时间，结果看到了一位大佬的文章。</p>
<p>参考文章：https://blog.csdn.net/weixin_42644340/article/details/119654050#:~:text=不带"#"既是his</p>
<p>在vue.config.js中进行修改：</p>
<p><img src="https://image0219.oss-cn-hangzhou.aliyuncs.com/images/image-20240904165930839.png" alt="image-20240904165930839" loading="lazy"></p>
<p>修改后重新打包。</p>
<p>成功访问，刷新后页面正常，问题成功解决。</p>
<blockquote>
<p>注意：js找不到，还可能存在的问题是，入口文件index.html中通过script引入的文件，使用相对路径或其他，可能导致加载不到。</p>
</blockquote>
<p>有任何问题，欢迎来问，一起探讨～～</p><br><br>
来源：https://www.cnblogs.com/mango0219/p/18671689
頁:
[1]