vue,一路走来（10）--生产环境

生产环境下的一些问题

使用webpack 打包前端应用后，图片和css、js 资源引用会出问题，
这源于开发环境的目录和生产环境的路径【url】不同

比如，开发环境的url是：http://localhost:8080/static/img/122.png

而生产环境的url是：http://www.xxx.com/dist/static/img/122.png

二者区别，开发环境是放在域名的根目录，所以不存在引用路径变化的问题。
如果生产环境不做处理的话，图片等静态文件会自动在相对路径前添加域名。
比如：

在样式中：
background:url(123.png)
这里会自动被转化为：
http://www.xxx.com/123.png
然而，除非项目放在了域名根目录下，一般情况这路径是不对的。因为有可能会有多个项目同在，所以一般不会直接放在根目录下。

解决方案：
webpack 是个优秀的打包工具，肯定有相关的配置的。
在build配置脚本中，就有相关配置项：　　

修改成如下图

然而这样修改后，还是有点小问题，如下图：

这样的图片路径是访问不到的，需要新建static文件夹

这样在开发环境就访问得到了。

可是在打包成生产环境还得再改一下，

这样有点不是很合理，2种环境不能同时兼容，暂时还没找到更好的办法。