安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的:

vue项目打包后路径出错_图片显示

但是执行 npm run build 打包项目后打开却报错了,如下:

vue项目打包后路径出错_vue_02

原来是项目中的静态文件路径报错了。。。

然后就针对这个问题去查找解决方法:

第一步:

vue项目打包后路径出错_图片显示_03

第二步: 找到下面文件,添加一行代码:

publicPath: '../../'

vue项目打包后路径出错_根目录_04

第三步:

重新执行 npm run build  ,再次打开成功   

 说明:  这里的打开方式:在builder编辑器里面直接打开打包后的dist文件夹下的index.html,打开后的地址 : http://127.0.0.1:8020/poverty_front/dist/index.html

-----------------------------------------------------------------------------------------  这里是分界线  2018 - 08 - 03   --------------------------------------------------------------------------------------------------------------------------------

然而我们把项目部署到服务器后,这里是在本地的dist下运行http-server,就相当于部署到服务器,这个时候打开的路径是  http://127.0.0.1:8081/#/homePage  (路由里面对首页做了重定向,所以看不到index.html)

scss文件里面的一个背景图片是: 

background:url(../../images/home/capitalAccount/bg_pic_1.png) no-repeat center center;  

这个图片跟其他正常显示的图片不一样的地方是它的大小是17.3KB,所以在浏览器查看代码的时候可以看到其显示的方式也不一样,这个图片显示的是绝对路径,而其他小的图片显示的是转码后的base64编码,如下图:

vue项目打包后路径出错_vue_05

然后我们再看下webpack的配置文件: 

其中limit就是限制图片的大小,超过这个值后就会把图片打包到指定的路径下

vue项目打包后路径出错_服务器_06

知道出现错误的原因后,我们来看如何解决这个问题的:

我们分析下上面打开的两个不同路径,我们发现部署到服务器的根目录是 http://127.0.0.1:8081 ,而没部署到服务器打开的根目录是  http://127.0.0.1:8020/poverty_front/ ,然后我们就可以看到没部署到服务器上的路径多了一个dist层的。

所以我们看回到上面的第一张图片,我们把原来的“/”改成了"./",从而实现了使用 http://127.0.0.1:8020/poverty_front/dist/index.html 下路径正常。相反的,因为部署后的路径和本地打开的路径是不一样的,所以这样就会导致部署后的路径会出错了。

 vue项目打包后路径出错_图片显示_03

所以我们的解决方案就是把上面的"./"改回原来的"/",因为其他的一些问题,直接在本地打开就是不可运行的,都是通过http-server来运行。

 

前端菜鸟一枚,习惯记录平时遇到的一些问题和学习笔记,觉得有用的可以点个支持!