vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決

更新時(shí)間：2020年09月02日 14:11:46 作者：譚少居然

這篇文章主要介紹了vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

今天使用vue打包（npm run build）遇到了幾個(gè)坑，在這里分享給大家

打包之后打開dist的頁面顯示空白：

這個(gè)問題以前就處理過，是打包過程中出現(xiàn)錯(cuò)誤頻率較高的一種，可能有3處地方會(huì)出現(xiàn)這種情況

1、記得改一下config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)榇虬蟮膇ndex.html里邊的內(nèi)容都是通過script標(biāo)簽引入的，默認(rèn)顯示的路徑不對，打開肯定是空白的。

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,
  devtool: '#source-map',
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  bundleAnalyzerReport: process.env.npm_config_report
 }

這里需要將 assetsPublicPath: '/'改為assetsPublicPath: './',

2.src里邊router/index.js路由配置里邊默認(rèn)模式是mode:'hash'（頁面會(huì)在路由上加#），有時(shí)候改成了history（純凈路由）模式的話，打開也會(huì)是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認(rèn)的就行。

export default new Router({
//mode: 'history',
mode:'hash',\\或者直接不寫
 routes: [{}]
)}

3.也有可能是因?yàn)楸尘皥D片路徑?jīng)]有配置需要在build/utils.js添加配置publicPath: '../../'

if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    publicPath:'../../',
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }

打包后找不到響應(yīng)路徑：

這都是比較常見的幾種解決方式，如果將靜態(tài)資源的圖片路徑作為綁定數(shù)據(jù)以js引入，圖片放入了static里面用來引入這個(gè)頁面又該怎樣處理呢,如果以絕對路徑訪問vue打包是不會(huì)處理這一類的，所以打包后它圖片訪問的路徑不會(huì)更改，而打包后dist文件里就只有index.html和webpack不會(huì)處理的static文件夾（vue static/下的文件都不會(huì)被Webpack處理：它們使用相同的文件名，直接拷貝到最終的路徑）

解決方式有兩種，

1.如果要上線的話，需要將你的主域名加在static之前然后他會(huì)逐級去訪問打包后的文件。

return {
 isShow:true,
 imgData:'',
 myUpPic:'/yourDN/static/img/logo.png'
}

2.由于vue將組件訪問靜態(tài)資源的路徑配置好了，你可以直接/static來找到static下的文件，但是這里的問題就是你訪問的時(shí)候它是逐級訪問這些文件的，所以打包后他還是會(huì)找不到靜態(tài)資源的文件，在這里你就需要將/static改成./static，這樣的話他就會(huì)在打包后的文件夾下直接訪問其之下的靜態(tài)資源文件夾。

return {
 isShow:true,
 imgData:'',
  //myUpPic:'/static/img/logo.png' 
 myUpPic:'./static/img/logo.png'
}

以上就是個(gè)人處理vue打包bug的一些小經(jīng)驗(yàn)，希望這些能夠?qū)Υ蠹矣兴鶐椭?/p>

補(bǔ)充知識：vue打包后路徑多了個(gè)/css/static

vue打包后路徑多了個(gè)/css/static導(dǎo)致一些css屬性效果不顯示。

解決方法：

在build/utils.js文件中添加publicPath:'…/…/',重新打包即可。

if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: "vue-style-loader",
    publicPath: "../../"
   });
  } else {
   return ["vue-style-loader"].concat(loaders);
  }

以上這篇vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: