按照vuejs官方的脚手架生成了demo代码,并运行,步骤如下:

$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev

打开浏览器,可以看到demo的页面:

vue-webpack-simple模板build后图片加载问题

此时打包后的build.js是在内存中的。如果要生成打包后的build.js需要执行下面的命令:

npm run build

想把打包后的build.js放到java web项目中的src目录下试着运行,html,js加载成功,页面能显示,但是图片没有显示出来,看了下图片的路径,在这里:

vue-webpack-simple模板build后图片加载问题

vue-webpack-simple模板build后图片加载问题

于是给项目中,增加了assets目录,把图片拷进去,重新执行,没有用。

vue-webpack-simple模板build后图片加载问题

又看了下请求的url,发现图片的路径在dist路径下

Request URL:
http://localhost:8080/dist/logo.png?82b9c7a5a3f405032b1db71a25f67021

 重新拷贝图片到webapp目录下

vue-webpack-simple模板build后图片加载问题

再次运行项目,图片加载成功!

相关文章:

  • 2021-08-17
  • 2022-12-23
  • 2021-06-01
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-02
  • 2022-12-23
猜你喜欢
  • 2022-01-06
  • 2021-12-16
  • 2021-05-06
  • 2022-12-23
  • 2021-08-20
  • 2021-12-09
  • 2021-07-29
相关资源
相似解决方案