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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
使用vue制作滑动标签
Sep 21 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
微信小程序实现首页弹出广告
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绘制一个矩形的方法
2015/01/24 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
Python中random模块生成随机数详解
2016/03/10 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
俄罗斯女装店:12storeez
2019/10/25 全球购物
会计的岗位职责
2014/03/15 职场文书
青春励志演讲稿
2014/04/29 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
仓管员岗位职责
2015/02/03 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python