前言本文基于低版本vue-cli2.x创建的项目。vue-cli3.0之后，修改webpack配置需要在项目根目录下新建一个vue。config.js，不过都是换汤不换药。项目配置页面很简单，一段文字，一张背景图。下面的配置项比较重要：assetRoot：打包文件的存放路径assetsSubDirectory：静态资源路径（除了index.html，其他资源都会放在这里）assetsPublicPath：index.html中引用的资源的路径前缀假设我们这样做下面配置#/config/index.jsassetsRoot:path.resolve(__dirname,'../dist'),assetsSubDirectory:'static'，访问白屏问题。打包后的dist目录是这样的#dist┌──static│└──css││└──*.css│└──img││└──*.jpg│└──js││└──*.js└──index.html然后，双击打开index.html，什么？为什么会出现白屏？F12看了一下，发现这里的资源路径有问题，因为static/js/xxx代表的是根路径，我们打开在项目目录下是找不到资源的，自然就白了画面出现。打包后的目录结构是固定的，index.html和static是同级的，所以可以使用相对路径导入static下的资源配置：assetsSubDirectory:'./'配置完成后，再打包访问，文字出来了，背景图破解了Opened...背景图片破解F12发现图片资源路径有问题：static/img/vague_bg.9cfff92.png。因为是css中引入的img，结合打包后的目录结构，正确的应该是/static/img/xxx，但是问题是已经设置了assetsSubDirectory为相对路径。。。有补救的办法，在xxx.css中的两条路径不是回到static目录吗？配置url-loader#/build/webpack.base.conf.jssetrules{test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,use:[{loader:"url-loader",options:{limit:10000,name:utils.assetsPath("img/[name].[hash:7].[ext]"),publicPath:"../../"}}]}，设置好之后再打包访问，完美~后记有人会问，为什么不直接设置assetsSubDirectory:'/'开头，即根路径也能解决问题？是的，没错，确实解决了问题。但是我有很多哔哩哔哩提供一些解决问题的方法，踩过的坑以及如何改掉。如果设置了根路径，那么当前资源只能在根路径下。可能项目会集成到后端项目中（也可以通过目录映射解决），不一定在根路径下。在当前dist下设置资源位的相对路径，保证资源路径在任何环境下都没有问题。这篇文章是我2018年刚毕业的时候遇到的一个问题，之前写在自己的博客里，后来因为疏于管理导致博客被黑了。现分享出来，记录下我的心路历程。结尾
