巧设publicPath,优雅适配生产环境要求

使用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/'便可。