使用vue或者angular 2的同学肯定离不开webpack，vue-cli等配置构建工具的出现，更是解放了开发者不少的负担。

1. vue-cli对静态资源的默认行为

vue-cli默认将生产环境的静态资源放在dist目录下，html加载js、css或者css加载png或者svg等静态资源时通常以dist目录为根目录，使用绝对路径进行加载。

2. 实际遇到的问题

但是大多数app静态资源并不会直接放到服务器根目录（以www.baidu.com为例），而是放在二级或者三级目录下，如www.baidu.com/yunpan,这样上面默认的配置将会导致加载不到对应静态资源，打开Chrome Devtools会发现，下载js、css、png的url如下：

https://www.baidu.com/a.js
https://www.baidu.com/b.css
https://www.baidu.com/c.png

这些请求通通报错404 Not found

多动手试一下，发现以下url的响应会是200 OK，得到实际需要的静态资源

https://www.baidu.com/yunpan/…
https://www.baidu.com/yunpan/…
https://www.baidu.com/yunpan/…

3. 原因以及解决方案
url-loader根据options的name属性将静态资源放置到对应目录，同时对html或者css引用静态资源的url进行修改，这也是vue-loader推荐大家自由放置静态资源而不用关心生产环境url指向的原因。
但是遇到app部署到网站二级目录的特殊场景，就自然而然地出现上面的问题。有人推荐修改/config/index.js中的config.build.assetsPublicPath为”,尝试后发现只能修正html引用js、css的问题，不能修正css引用image、iconfont等静态资源的问题。

实际上，你无须改变config.build.assetsPublicPath，只需要在/build/webpack.prod.conf.js中output增加publicPath，将其置为’/yunpan/’即可。