vue项目build打包遇到的问题

Vue项目build打包问题及解决方案

最新推荐文章于 2024-06-18 18:18:52 发布

小童姥

最新推荐文章于 2024-06-18 18:18:52 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_43749669/article/details/120646849

在使用Vue进行项目开发时，打包过程中可能会遇到index.html页面空白、路由跳转失败和背景图片丢失的问题。解决方法包括修改assetsPublicPath为'./'以解决路径问题，调整路由模式为'mode: 'hash''以修复路由跳转，以及在utils.js中添加publicPath: '…/…/'来确保静态资源的正确引用。通过这些步骤，可以成功解决打包遇到的常见问题。

1. npm run build打包项目之后，生成的dist文件里面有被压缩后的static文件跟index.html，直接打开index.html页面是空白的，还会报几个错，找不到页面路径。

原因: 找到config文件下index.js，全局搜索assetsPublicPath，结果是 assetsPublicPath：’ / ’ 默认为根目录，而index.html和static是在同一级目录下，因此，解决方法就是 assetsPublicPath：’ ./ ’ , 斜杠前加一个点，表示同一级。如图：
在这里插入图片描述
2. 这样之后页面就打开了, 但是路由却跳转不了了.
解决方法：打开index.js看路由配置，mode:’ hash ’ 改这个配置即可，如图：

3. 在本地跑的时候一切正常，但是build之后生成的index.html背景图没有了，是一片空白.
解决方法 :
在build 下的 utils.js中找到如图代码,并添加 publicPath: ‘…/…/’：
在这里插入图片描述
此时,就完美解决了, 希望对你有所帮助,这也是我亲身踩过的坑,一步一个脚印!!!