vue項目配置public靜態(tài)資源路徑訪問

一般的vue項目都有一個初始index.html，而其他js、css都是這個html引入的，默認情況下使用絕對路徑引入，如/js/app.js

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

此時使用絕對路徑訪問不到index.html引入的js、css等，而相對路徑是不變的

解決

vue.config.js

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

配置publicPath即可，而這個的默認值是'/'

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

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

圖片路徑問題

起因：

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

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

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

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

片加載失敗，同時報出如下錯誤。

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

解決：

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

看代碼：

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

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)默認轉(zhuǎn)碼為base64
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},

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

起因：

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

解決：

打開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)
 }
}

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論