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 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
JS实现密码框效果
Sep 10 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
React Fragment介绍与使用详解
Nov 11 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反转字符串函数strrev()函数的用法
2012/02/04 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
python实现淘宝购物系统
2019/10/25 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
Python如何进行时间处理
2020/08/06 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
岗位职责风险点
2014/03/12 职场文书
说明书范文
2014/05/07 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
本溪关门山导游词
2015/02/09 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS