『vue踩坑日常』 在index.html中引入静态文件不生效
Vue日常踩坑日常 —— 在index.html中引入静态文件不生效问题
本文针对的是Vue小白,不喜勿喷,谢谢
出现该问题的标志如下
控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html
)
出现的原因及解决办法
第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static
第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的几个配置文件内的static更改为你自己所创建的静态资源目录,由于网上大多教程所改的地方都不够完全,还是会出现该问题,所以这也是今天为什么要写这篇文章的原因。
需要更改的有3个文件,分别是config
文件夹下的index.js
,build
文件夹下的webpack.dev.conf.js
和webpack.prod.conf.js
假如你的静态资源文件夹叫public,和src文件夹同级,需要修改的如下
1. index.js
dev: {
assetsSubDirectory: 'public',//原本是static,现在改为public
assetsPublicPath: `/${name}/`,
...
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'public',//原本是static,现在改为public
2. webpack.dev.conf.js
// copy custom static assets
new CopyWebpackPlugin([
{
//下面原本是static,现在改为public
from: path.resolve(__dirname, '../public'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
3. webpack.prod.conf.js
// copy custom static assets
new CopyWebpackPlugin([
{
//下面原本是static,现在改为public
from: path.resolve(__dirname, '../public'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
Ps:有任何问题欢迎在评论区探讨
『vue踩坑日常』 在index.html中引入静态文件不生效的更多相关文章
- 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)
最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...
- 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)
最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...
- vue-cli构建项目在index.html中使用静态文件
在vue-cli构建的项目中,且使用在移动端,我们希望每一个页面加载时都可以使用flexible.js来适配手机. 那么这个flexible.js被import到每一个组件中就不合适了. 好的方法是直 ...
- React BrowserHistory 踩坑实录 布置到服务器Nginx上各种静态文件、二级地址404
由于BrowserHistory访问的是文件真实地址不仅需要前端配置package.json还需要运维端配置一下网站Nginx设置环境: "react": "^17.0. ...
- Vue packages version mismatch的解决方法 初来乍到,踩坑日常
初来乍到,踩坑日常 这个问题也是我也是接受别人项目,出现的问题,在下载好依赖后运行的时候报这样的错误 它上面显示两个版本一个vue的版本,一个vue-template-compiler版本,我这边忘了 ...
- vue踩坑记
vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...
- vue踩坑之旅 -- computed watch
vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...
- vue踩坑记,持续更新中......
1.运行项目报错 you may use special comments to disable some waring. use //eslint-disable-next-line.....吧啦吧 ...
- vue踩坑(二):跨域以及携带cookie
最近后台需求要在请求的时候传cooki给后台,正常情况下拿到cookie后存在cookie里,同域名下是会自己带到请求头里的,但是因为要在本地调试,那么问题就来了,localhost:8080下面的c ...
随机推荐
- Spring MVC 的 XML 配置方式
索引: 开源Spring解决方案--lm.solution 参看代码 GitHub: solution/pom.xml solution/webapi/pom.xml solution/mapper/ ...
- Maven学习(七)-- 使用Maven构建多模块项目
摘自:http://www.cnblogs.com/xdp-gacl/p/4242221.html 在平时的Javaweb项目开发中为了便于后期的维护,我们一般会进行分层开发,最常见的就是分为doma ...
- Archlinux安裝指南(uefi+gpt)
1.系统安装前的一些准备 首先在Archlinux官网下载镜像文件,然后刻录到U盘或光盘上.在我的机器上刻录arch镜像文件到U盘后启动不了,因为时间问题我没做过多的探索,所以后面直接刻录到光盘,用光 ...
- 【Lua】特性和一些基础语法
在Lua中,你可以使用单行注释和多行注释. 单行注释中,连续两个减号"--"表示注释的开始,一直延续到行末为止.相当于C++语言中的"//". 多行注释中,由& ...
- Eclipse从数据库逆向生成Hibernate实体类和映射文件(Eclipse插件系列之HibernateTools)
♣下载安装Eclipse插件(HibernateTools) ♣Eclipse连接数据库(Mysql5.7) ♣新建hibernate.properties和hibernate.cfg.xml文件 ♣ ...
- JXP
JSX 初识:它是JavaScript的语法扩展,建议在React中使用它来描述UI的外观. 考虑这个变量声明: 在JSX中嵌入表达式 可以通过将其包含在大括号中来嵌入JSX中的任何JavaScr ...
- eclipse常用快捷键(windows下)
## eclipse常用快捷键(windows下) ## 保存 1.保存当前代码页: ctrl + s 2.保存所有代码页: ctrl + shift + s 代码补全与修正 1.代码快速修正: ct ...
- 在Python中用Request库模拟登录(一):字幕库(无加密,无验证码)
字幕库的登录表单如下所示,其中省去了无关紧要的内容: <form class="login-form" action="/User/login.html" ...
- php对接微信小程序支付
前言:这里我就假装你已经注册了微信小程序,并且基本的配置都已经好了.注: 个人注册小程序不支持微信支付,所以我还是假装你是企业或者个体工商户的微信小程序,其他的商户号注册,二者绑定,授权,支付开通,就 ...
- 利用javaScript实现鼠标在文字上悬浮时弹出悬浮层
在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失.比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: < ...