vue-cli 项目,打包后js,css,img静态资源找不到

js,css资源都找不到

最近,我使用vue-cli脚手架搭建了一个vue项目框架,随意写了点页面,打包出来之后,放到tomcat运行,
MOG,竟然所有的资源都找不到,全是404。通过查看api和别人的博客,修改了一下配置文件,config.js下的index.js
image.png
默认的时候,是没有monitor的,记得assetsPublicPath前后都是有斜杠的,别弄错了哟,
npm run build 之后,dist目录下会多一层monitor文件夹,再下面才是static和index.html.

修改之后,js和css文件资源总算找到。但又出现了另外一个问题,图片资源找不到

在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错:
0022qUIFzy7eb5qjfoS6a&690.png
刚开始以为是路径出问题了,于是绝对路径、相对路径各种办法试了一遍,发现还是报错,后来才发现这是
因为在Vue里动态生成的路径无法被url-loader解析到,此时有两种解决方法:

方法一.直接将你的图片源文件放在项目目录的static文件夹里,然后和正常写图片路径那样写就可以了:

image.png
image.png
image.png
image.png

方法二.通过import的方法将图片源路径引入,如下图所示:


image.png
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,077评论 1 45
  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 11,768评论 0 16
  • 这几天都感觉自己很累,没有合理的规划好时间,以至于不管是做什么都完不成。玩游戏的时候感觉自己的心里很空虚,...
    苏叙阅读 1,319评论 6 17
  • 最近和一个小妹妹聊天,谈到现在我们择偶标准,开口就是有房子长得不是太丑就行。我目瞪口呆。但是随后又表示理解,但是细...
    二玮阅读 695评论 0 0
  • 这一课做的还是比较简单,听的不够细心,周日会一起回听,期待自己做出更好的笔记,可以牢固的记住所学的知识。
    白瑶瑶阅读 1,118评论 1 0