vue項(xiàng)目如何配置public靜態(tài)資源路徑訪問(wèn)

更新時(shí)間：2023年11月09日 14:54:24 作者：crayon-shin-chan

這篇文章主要介紹了vue項(xiàng)目如何配置public靜態(tài)資源路徑訪問(wèn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue項(xiàng)目配置public靜態(tài)資源路徑訪問(wèn)

一般的vue項(xiàng)目都有一個(gè)初始index.html，而其他js、css都是這個(gè)html引入的，默認(rèn)情況下使用絕對(duì)路徑引入，如/js/app.js

這樣就有一個(gè)問(wèn)題，靜態(tài)資源經(jīng)常要部署在不同的上下文路徑下，如nginx將vue靜態(tài)資源部署在/static下

此時(shí)使用絕對(duì)路徑訪問(wèn)不到index.html引入的js、css等，而相對(duì)路徑是不變的

解決

vue.config.js

module.exports = {  
publicPath: ''
???????}

配置publicPath即可，而這個(gè)的默認(rèn)值是'/'

vue打包后靜態(tài)資源路徑錯(cuò)誤的問(wèn)題

vue項(xiàng)目完成的最后一步就是打包部署上線，但是打包部署的過(guò)程往往不是那么一帆風(fēng)順的，現(xiàn)將遇到問(wèn)題和解決方案記錄如下。

圖片路徑問(wèn)題

起因：

頁(yè)面中引入資源的方式往往有如下幾種

* HTML標(biāo)簽中直接引入圖片，如 <img src="../assets/images/index.png">
* JS代碼中定義資源路徑屬性，如src: require('../assets/images/index.png')
* CSS代碼中定義資源為背景圖片，如background-image: url("../assets/images/indexpng")

上述三種資源加載方式還是有所區(qū)別的。

前兩種無(wú)論圖片大小，都會(huì)使用url-loader加載器將其轉(zhuǎn)化為base64編碼的靜態(tài)資源，而第三種方式則會(huì)根據(jù)webpack中配置的limit參數(shù)，動(dòng)態(tài)選擇符合大小要求的圖片進(jìn)行轉(zhuǎn)碼，此時(shí)則會(huì)導(dǎo)致不符合大小選擇的圖

片加載失敗，同時(shí)報(bào)出如下錯(cuò)誤。

localhost:8080/dist/static/css/static/img/index.254207f.png

解決：

1.保證打包資源路徑可用，首先要做的是配置build.js執(zhí)行時(shí)的資源參數(shù)，打開config目錄下的index.js

看代碼：

  	index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',  // 修改為'./'滿足資源相對(duì)路徑

2.保證資源轉(zhuǎn)碼條件符合。這塊主要涉及到加載用到的加載器url-loader, 需要保證其配置可執(zhí)行。打開build目錄下的

webpack.base.conf.js

看代碼：

{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,  // 該限制為小于10KB的圖片，系統(tǒng)默認(rèn)轉(zhuǎn)碼為base64
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},

依賴資源路徑問(wèn)題（字體、圖標(biāo)）

起因：

系統(tǒng)采用vue + elementUI，但是發(fā)現(xiàn)打包之后的字體文件和圖標(biāo)都不能正常顯示，報(bào)錯(cuò)如下：

解決：

打開build目錄下utils.js，添加路徑配置 publicPath: '../../',

看代碼：

// Extract CSS when that option is specified
// (which is the case during production build)
 if (options.extract) {
   return ExtractTextPlugin.extract({
     use: loaders,
     fallback: 'vue-style-loader',
     publicPath: '../../' // 解決element UI打包后字體文件丟失
   })
 } else {
   return ['vue-style-loader'].concat(loaders)
 }
}