vue项目之webpack打包静态资源路径不许确

摘自：https://blog.csdn.net/viewyu12345/article/details/83187815

问题

1. 将打包好的项目部署到服务器，发现报错说图片找不到。
2. 静态资源如js访问不到

分析而且解决问题

明确一点的就是，看到报错404，找不到静态资源，很明显，路径错误了。

静态资源找不到如js文件
资源打包路径有误，打包后的资源使用了绝对根目录路径，所以将项目部署到特定目录下，其引入的资源路径没法被正确解析。

解决：

找到config下面的index.js文件，将划线处改成以下样子。

 

 

以前是根目录，确定找不到文件，咱们改为相对目录便可。打包后，去看看index.html中引入的文件就知道变化了。

图片找不到
首先咱们来看一下咱们打包后生成的文件目录：

 

 

 上面的报错，要是没有static/css就彻底能够找到图片了。可是为何有的图片可以找获得有的图片找不到呢，一样的方法写在css文件里面。这里咱们就要了解一下webpack在打包咱们的文件时候进行的操做了。

webpack打包limit限制

 

 

limit值为10000，表示字节。什么做用呢？就是小于这个字节限制的，不是不打包，而是转化为base64（css样式中，图片的代码变成了一堆字符）。大于的话就正常打包，加上7位hash值，就变成以下路径。

 

 

跑到了img下面去了，img这个名字就是咱们上面webpack配置的。这样路径就不对了，因此找不到图片。

从源头分析问题

在vue项目中，咱们打包生成项目，跑命令以下。

npm run build

那么，咱们就看看在执行这个命令中，运行的代码，以此入手。找到config下面的index.js文件

 

 

打包后生成的文件代码：

 

 

最开始，咱们的assetsPublicPath值为'/'，表示根目录，咱们看看打包后的文件样子。

 

 

这样直接从根目录获取，咱们将项目部署到服务器上都是有名字的，这样直接到服务器根目录确定不能获取。

解决图片路径错误办法

在build文件夹下面找到utils.js文件，以下图

 

 

新增红色的部分，这样打包的样子就变成../../static的样子了，就能够解决咱们的问题。