vue在index.html中引入静态文件不生效问题及解决方法
2019-05-26 18:02
2727 查看
本文针对的是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: ['.*'] } ])
总结
以上所述是小编给大家介绍的vue在index.html中引入静态文件不生效问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- 在vue的index.html里引入css,样式不生效的解决办法(100%亲测有效)
- 解决HTML外部引用CSS文件不生效问题
- 修改php.ini不生效问题解决方法(上传大于8M的文件)
- 本地Bootstrap文件字体图标引入却无法显示问题的解决方法
- 解决HTML外部引用CSS文件不生效问题
- 解决webpack+Vue引入iView找不到字体文件的问题
- WCF问题:“HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理”解决方法
- EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)
- 防止页面中js文件重复引入报错问题解决方法浅谈
- springboot引入静态js、css文件到static之后 templetes文件夹下的html页面无法加载js、css问题记录
- vue中引入vue-i18n实现国际化时与ElementUI库的兼容性问题解决方法
- 网站调用其他域名的静态文件导致的跨域问题、CORS错误解决方法
- vue-cli2.x项目优化之引入本地静态库文件的方法
- (问题解决)bootstrap配置文件 引入idea html页面路径错误
- Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
- 外部引入js文件不生效解决方法
- day23--电影院买票问题解决 同步代码块 同步方法 静态同步方法的引入
- 引入JS文件IE6报语法错误或缺少对象问题的解决方法
- 修改php.ini不生效问题解决方法(上传大于8M的文件)
- 在Vue项目中引入css出现问题解决方法