vue在index.html中引入靜態(tài)文件不生效問題及解決方法
本文針對(duì)的是Vue小白，不喜勿噴，謝謝
出現(xiàn)該問題的標(biāo)志如下
控制臺(tái)warning（Resource interpreted as Stylesheet but transferred with MIME type text/html）
出現(xiàn)的原因及解決辦法
第一種可能出現(xiàn)原因就是引入的靜態(tài)文件在src文件夾內(nèi)，這種的解決辦法就是把資源引入靜態(tài)資源的目錄static
第二種可能出現(xiàn)的原因就是有單獨(dú)的靜態(tài)資源目錄但是名字不叫static，這種的解決辦法更改配置文件，把對(duì)應(yīng)的幾個(gè)配置文件內(nèi)的static更改為你自己所創(chuàng)建的靜態(tài)資源目錄，由于網(wǎng)上大多教程所改的地方都不夠完全，還是會(huì)出現(xiàn)該問題，所以這也是今天為什么要寫這篇文章的原因。
需要更改的有3個(gè)文件，分別是config文件夾下的index.js,build文件夾下的webpack.dev.conf.js和webpack.prod.conf.js
假如你的靜態(tài)資源文件夾叫public，和src文件夾同級(jí)，需要修改的如下
1. index.js
dev: {
assetsSubDirectory: 'public',//原本是static，現(xiàn)在改為public
assetsPublicPath: `/${name}/`,
...
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'public',//原本是static，現(xiàn)在改為public
2. webpack.dev.conf.js
// copy custom static assets
new CopyWebpackPlugin([
{
//下面原本是static，現(xiàn)在改為public
from: path.resolve(__dirname, '../public'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
3. webpack.prod.conf.js
// copy custom static assets
new CopyWebpackPlugin([
{
//下面原本是static，現(xiàn)在改為public
from: path.resolve(__dirname, '../public'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
總結(jié)
以上所述是小編給大家介紹的vue在index.html中引入靜態(tài)文件不生效問題及解決方法,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue+springboot實(shí)現(xiàn)項(xiàng)目的CORS跨域請(qǐng)求
這篇文章主要介紹了vue+springboot實(shí)現(xiàn)項(xiàng)目的CORS跨域請(qǐng)求，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。這篇文章主要介紹了vue中使用sessionStorage記住密碼功能,需要的朋友可以參考下2018-07-07
Vue iview-admin框架二級(jí)菜單改為三級(jí)菜單的方法
這篇文章主要介紹了Vue iview-admin框架二級(jí)菜單改為三級(jí)菜單的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue3中的動(dòng)畫過渡實(shí)現(xiàn)技巧分享
在現(xiàn)代的前端開發(fā)中,用戶體驗(yàn)的重要性不言而喻,為了讓應(yīng)用程序更加生動(dòng)和引人注目,動(dòng)畫和過渡效果是必不可少的元素,本文將以 Vue3 為基礎(chǔ),深入探討如何在應(yīng)用程序中實(shí)現(xiàn)動(dòng)畫過渡,以及一些技巧和最佳實(shí)踐,需要的朋友可以參考下2025-01-01
vue刷新頁面后params參數(shù)丟失的原因和解決方法
這篇文章主要給大家介紹了vue刷新頁面后params參數(shù)丟失的原因和解決方法,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
在現(xiàn)代Web開發(fā)中,Vue.js與Flask或Django配合使用,實(shí)現(xiàn)前后端分離,提高開發(fā)效率和應(yīng)用性能,本文介紹了整合Vue.js和Flask/Django的步驟,包括環(huán)境搭建、API編寫、項(xiàng)目配置,以及生產(chǎn)部署,此架構(gòu)不僅加快了開發(fā)進(jìn)程,還提高了項(xiàng)目的可維護(hù)性和可擴(kuò)展性2024-09-09
這篇文章主要為大家介紹了在Vue中實(shí)現(xiàn)組件切換的三種方法,即使用條件渲染,使用動(dòng)態(tài)組件以及通過點(diǎn)擊按鈕切換組件,有需要的小伙伴可以了解下2024-11-11
vue3 el-table 如何通過深度選擇器::v-deep修改組件內(nèi)部樣式(默認(rèn)樣式)
在Vue3中,通過使用深度選擇器::v-deep可以有效修改element-plus中el-table組件的內(nèi)部樣式,這種方法允許開發(fā)者覆蓋默認(rèn)的樣式,實(shí)現(xiàn)自定義的視覺效果,本文給大家介紹vue3 el-table 通過深度選擇器::v-deep修改組件內(nèi)部樣式,感興趣的朋友一起看看吧2024-10-10
這篇文章主要為大家介紹了Vue3中使用Supabase?Auth方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue項(xiàng)目中一定會(huì)用到的性能優(yōu)化技巧
這篇文章主要為大家介紹了vue項(xiàng)目中一定會(huì)用到的性能優(yōu)化技巧實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07