码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-09-04 11:48:00      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:目录   class   解决方法   nal   load   引入   height   npm   htm   

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

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

标签:目录   class   解决方法   nal   load   引入   height   npm   htm   

原文地址:https://www.cnblogs.com/sweeeper/p/11457893.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!