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 广告后加载,加载完页面再加载广告
Nov 25 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
javascript实现动态时钟的启动和停止
Jul 29 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制作的意见反馈表源码
2007/03/11 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
2020/04/27 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
全面解读Python Web开发框架Django
2014/06/30 Python
python分割文件的常用方法
2014/11/01 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
中学教师实习自我鉴定
2013/09/28 职场文书
应届生个人求职信模板
2013/11/26 职场文书
自考生自我评价分享
2014/01/18 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
运动会稿件300字
2014/02/14 职场文书
师德师风演讲稿
2014/05/05 职场文书
优秀团干部个人事迹
2014/05/29 职场文书