javascript - vue里引用的图片 部署到服务器加载失败

问题描述

目录结构:

代码:

<img src='https://www.haobala.com/wenda/title.png' />

在本地服务器运行可以正常加载, 但是放到服务器(tomcat)上就无法加载, 项目部署在webapp/myproject/目录,在服务器应该请求的图片路径是http://1.1.1.1:8080/myproject...但是实际请求的图片路径是http://1.1.1.1:8080/static/im...请问如何在vue里把图片路径写成当前目录而不是服务器根目录

问题解答

这个问题我之前遇到过，已经整理成文档，你需要修改的是webpack配置，然后重新打包就可

刚好这个我也遇到过，放在服务器时此时的图片路径应该是绝对路径，在本地时就按<img src='https://www.haobala.com/wenda/title.png' />路径，在服务器时就是<img src='https://www.haobala.com/myproject/static/img/title.45ae5f4.png' />。当然上面的方法更加好

你如果用的脚手架，请熟悉下config里面几个JS的用途，尤其是index.js

build: {env: require(’./prod.env’),index: path.resolve(__dirname, ’../dist/index.html’),assetsRoot: path.resolve(__dirname, ’../dist’),assetsSubDirectory: ’static’, // 附件资源引用子目录assetsPublicPath: ’项目正式地址’, // 服务器资源引用根目录productionSourceMap: true, }