javascript – Bei der Bereitstellung von vue.js sind Bildpfadprobleme aufgetreten
阿神
阿神 2017-05-19 10:32:13
0
2
916

Ich bin auf dieses Problem gestoßen, als ich die Befehlszeile „cnpm run build“ zum Packen und Bereitstellen des vue.js-Projekts verwendet habe. Bitten Sie um Hilfe T T

Zunächst wird der Hintergrund-Tomcat mit dem Anwendungskontext xxx konfiguriert, sodass der Stammpfad des Servers zu http://localhost:8080/xxx wird

Setzen Sie nun das Bild auf <img src="../../assets/ad.png">
Nach dem Packen und Bereitstellen kann das Bild nicht angezeigt werden und wenn Sie das Element anzeigen, wird es zu <img src ="/static/img/ ad.22bf537.png">
Fehlerbericht kann nicht geladen werden http://localhost:8080/static/...

Ändern Sie den Pfad direkt zu <img src="./static/img/ad.22bf537.png"> und er wird angezeigt

Wie sollen wir dieses Problem also vor dem Verpacken lösen?

阿神
阿神

闭关修行中......

Antworte allen(2)
淡淡烟草味

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

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

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

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

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

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

当我将assetsPublicPath修改成/public/后,输出的index.html的资源链接变化了:

另外有一种万能的方法,使用string-replace-loader,简单来说就是匹配字符串然后替换,具体说明可以看这里。

希望对你有帮助吧。

PHPzhong

或者将图片的路径require('图片路径')作为img的src 你试试这样的方法

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage