vue.js 部署中碰到的图片路径问题

http://www.cnblogs.com/xiaojingyuan/p/7080768.html
https://segmentfault.com/q/1010000009177458/a-1020000009179068

本地图片动态绑定img的src属性

一般我们在html中或者vue组件文件中引用图片是这样，这是不需要做特别处理的





我们将图片放入assets中或者重新建立个文件夹img什么的都可以，随意～

vue-cli的脚手架默认都是按照生产环境的项目来构建的，大概意思就是直接构建一个项目，而非某项目下的一个小模块。于是，一般的网站会把static放在网站根目录下。你可以打开build以后生成的dist目录，里面的结构如下：



那么楼主你的问题无非两种解决方式：

修改最终资源位置，例如将static放到项目根目录

修改页面中对资源的引用链接

第一种无需解释了，移动一下目录位置就好了。   

 // 将static/img文件夹移动到根目录nginx指向，可以实现

navbackIcon: '../static/img/nav_back@2x.png',

第二种有很多种方法，但最好还是通过修改webpack的配置来达到目标。建议楼主可以多看看webpack的配置文件~   

//改变imgurl在data的引用路径，可以实现

navbackIcon: 'static/img/nav_back@2x.png',