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.js組件之間傳遞數(shù)據(jù)的方法，組件實(shí)例的作用域是相互獨(dú)立的，如何傳遞數(shù)據(jù)也成了組件的重要知識(shí)點(diǎn)之一，有興趣的可以了解一下2017-07-07
今天小編就為大家分享一篇vuex存儲(chǔ)token示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue中實(shí)現(xiàn)Monaco Editor自定義提示功能
最近小編接到一個(gè)項(xiàng)目，需要在瀏覽器的ide中支持自定義提示功能，接下來通過本文給大家介紹在vue中實(shí)現(xiàn)Monaco Editor自定義提示功能,需要的朋友可以參考下2019-07-07
Vue實(shí)現(xiàn)typeahead組件功能(非?？孔V)
本文給大家分享通過Vue寫一個(gè)挺靠譜的typeahead組件功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
在Vue中實(shí)現(xiàn)二維碼生成與掃描功能的方法
二維碼是一種廣泛應(yīng)用于各種場(chǎng)合的編碼方式，它可以將信息編碼成一張二維圖案，方便快捷地傳遞信息，在Vue.js中，我們可以使用一些庫和組件來實(shí)現(xiàn)二維碼的生成和掃描，本文將介紹如何在Vue中實(shí)現(xiàn)二維碼的生成和掃描的方法2023-06-06
vue引用BootStrap以及引用bootStrap-vue.js問題
這篇文章主要介紹了vue引用BootStrap以及引用bootStrap-vue.js問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue使用elementUI分頁如何實(shí)現(xiàn)切換頁面時(shí)返回頁面頂部
這篇文章主要介紹了vue使用elementUI分頁如何實(shí)現(xiàn)切換頁面時(shí)返回頁面頂部，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了element-ui upload組件多文件上傳的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了Vue通過懶加載提升頁面響應(yīng)速度，對(duì)Vue性能感興趣的同學(xué)，可以參考下2021-05-05
vue實(shí)現(xiàn)動(dòng)態(tài)監(jiān)測(cè)元素高度
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)監(jiān)測(cè)元素高度方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10