打包后放在服务器上耳机目录找不到解决办法

Posted 2022-09-30 sweeeper

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

转自：https://www.jianshu.com/p/9a4690f5bdce