vue在index.html中引入靜態(tài)文件不生效問題及解決方法

更新時(shí)間：2019年04月29日 10:43:11 作者：linwene''s blog

這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問題及解決方法，本文給大家分享兩種原因分析，通過實(shí)例代碼講解的非常詳細(xì) ,需要的朋友可以參考下

本文針對的是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，這種的解決辦法更改配置文件，把對應(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文件夾同級，需要修改的如下

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)文件不生效問題及解決方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

vue+springboot實(shí)現(xiàn)項(xiàng)目的CORS跨域請求
這篇文章主要介紹了vue+springboot實(shí)現(xiàn)項(xiàng)目的CORS跨域請求，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
vue中使用sessionStorage記住密碼功能
sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級別的存儲(chǔ)。這篇文章主要介紹了vue中使用sessionStorage記住密碼功能,需要的朋友可以參考下
2018-07-07
Vue iview-admin框架二級菜單改為三級菜單的方法
這篇文章主要介紹了Vue iview-admin框架二級菜單改為三級菜單的方法，小編覺得挺不錯(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ì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-12-12
Vue.js與Flask/Django后端配合方式
在現(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)組件切換效果的三種功能
這篇文章主要為大家介紹了在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方法詳解
這篇文章主要為大家介紹了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