vue-cli 项目,打包后js,css,img静态资源找不到
js,css资源都找不到
最近,我使用vue-cli脚手架搭建了一个vue项目框架,随意写了点页面,打包出来之后,放到tomcat运行,
MOG,竟然所有的资源都找不到,全是404。通过查看api和别人的博客,修改了一下配置文件,config.js下的index.js
![](https://upload-images.jianshu.io/upload_images/7096759-cf6625953d966bec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/752/format/webp)
image.png
默认的时候,是没有monitor的,记得assetsPublicPath前后都是有斜杠的,别弄错了哟,
npm run build 之后,dist目录下会多一层monitor文件夹,再下面才是static和index.html.
修改之后,js和css文件资源总算找到。但又出现了另外一个问题,图片资源找不到
在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错:
![](https://upload-images.jianshu.io/upload_images/7096759-5ffd6833d1a51d40.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/489/format/webp)
0022qUIFzy7eb5qjfoS6a&690.png
刚开始以为是路径出问题了,于是绝对路径、相对路径各种办法试了一遍,发现还是报错,后来才发现这是
因为在Vue里动态生成的路径无法被url-loader解析到,此时有两种解决方法:
方法一.直接将你的图片源文件放在项目目录的static文件夹里,然后和正常写图片路径那样写就可以了:
![](https://upload-images.jianshu.io/upload_images/7096759-279961a9e6a8dc63.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/458/format/webp)
image.png
![](https://upload-images.jianshu.io/upload_images/7096759-f5393255e9bd2599.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/613/format/webp)
image.png
![](https://upload-images.jianshu.io/upload_images/7096759-ccbbc32859df9f4c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/803/format/webp)
image.png
![](https://upload-images.jianshu.io/upload_images/7096759-0ad5001829e8c37d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/596/format/webp)
image.png
方法二.通过import的方法将图片源路径引入,如下图所示:
image.png
![](https://upload-images.jianshu.io/upload_images/7096759-eb1acfeea6d56f74.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/689/format/webp)
image.png