javascript - The image referenced in vue fails to load when deployed to the server-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - The image referenced in vue fails to load when deployed to the server

曾经蜡笔没有小新 2017-07-05 10:26:18

1277

Directory Structure:

Code:

It can be loaded normally when running on the local server,
But it cannot be loaded when placed on the server (tomcat). The project is deployed in the webapp/myproject/ directory,
The image path that should be requested on the server is http:// 1.1.1.1:8080/myproject...
But the actual requested image path is http://1.1.1.1:8080/static/im...
How to write the image path as the current directory in vue Instead of the server root directory

曾经蜡笔没有小新

reply all (3)

曾经蜡笔没有小新2017-07-05 10:28:18 3 floor

I have encountered this problem before and it has been compiled into a document. What you need to modify is the webpack configuration and then repackage it

Like+0

Add Reply

習慣沉默2017-07-05 10:28:18 2 floor

I have also encountered this. When it is placed on the server, the image path at this time should be an absolute path. When it is local, press the path. When it is placed on the server, it is < ;img src="/myproject/static/img/title.45ae5f4.png" />. Of course the above method is better

Like+0

Add Reply

小葫芦2017-07-05 10:28:18 1 floor

If you are using scaffolding, please familiarize yourself with the uses of several JSs in config, especially index.js

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

Like+0

Add Reply