vue在index.html中引入静态文件不生效问题及解决方法


Posted in Javascript onApril 29, 2019

本文针对的是Vue小白,不喜勿喷,谢谢

出现该问题的标志如下

控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html)

vue在index.html中引入静态文件不生效问题及解决方法

出现的原因及解决办法

第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static

第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的几个配置文件内的static更改为你自己所创建的静态资源目录,由于网上大多教程所改的地方都不够完全,还是会出现该问题,所以这也是今天为什么要写这篇文章的原因。

需要更改的有3个文件,分别是config文件夹下的index.js,build文件夹下的webpack.dev.conf.jswebpack.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: ['.*']
   }
  ])

总结

以上所述是小编给大家介绍的vue在index.html中引入静态文件不生效问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 #Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 #Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 #Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 #Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 #Javascript
深入浅析Vue 中 ref 的使用
Apr 29 #Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 #Javascript
You might like
php函数与传递参数实例分析
2014/11/15 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
javascript数组详解
2014/10/22 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
夏季奶茶店创业计划书
2014/01/16 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2014年新教师工作总结
2014/11/08 职场文书
Spring Boot 实现 WebSocket
2022/04/30 Java/Android
python 镜像环境搭建总结
2022/09/23 Python