操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

目錄Vue項目打包后部分圖片不顯示

Vue項目build圖片加載不出來

vue項目，build之后會對圖片進行處理vue 加載本地資源圖片，具體處理的方式是在文件.base.conf.js中，有如下代碼：

module: {
? ? rules: [
? ? ?{
? ? ? ? test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
? ? ? ? loader: 'url-loader',
? ? ? ? options: {
? ? ? ? ? limit: 10000, // 1k-----限制文件的大小
? ? ? ? ? name: utils.assetsPath('img/[name].[hash:7].[ext]')
? ? ? ? }
? ? ?}
? ? ]
}

以上代碼中，使用url-對圖片的大小進行限制，在limit之內，會將圖片轉化為，超出limit限制，交給file-處理。

如果在limit范圍之內，不會出現圖片加載不出來的情況；

超出limit，會將處理后的圖片放在dist//img/中，此時加載圖片將會顯示不出來。具體做法如下：

1.在/index.js文件內

修改代碼： (列出index.js的部分代碼)

build: {
? ? // Template for index.html
? ? index: path.resolve(__dirname, '../dist/index.html'),
?
? ? // Paths
? ? assetsRoot: path.resolve(__dirname, '../dist'),
? ? assetsSubDirectory: 'static',
? ? assetsPublicPath: './',?
}

字段值由之前的'/'改為'./'；

2.在.prod.conf.js文件內

字段，添加代碼(: './')：

output: {
? ? publicPath: './', // 添加的代碼
? ? path: config.build.assetsRoot,
? ? filename: utils.assetsPath('js/[name].[chunkhash].js'),
? ? chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
? },

3.在utils.js文件里添加 :'../../'

代碼如下：

// (which is the case during production build)
if (options.extract) {
? return ExtractTextPlugin.extract({
? ? use: loaders,
? ? fallback: 'vue-style-loader',
? ? publicPath: '../../' ?// 添加的代碼
? })
} else {
? return ['vue-style-loader'].concat(loaders)
}

以上步驟操作完后，執行命令:npm run build

在build后，dist中的index.html頁面的link、標簽的引入路徑變為相對路徑；同時，相關的圖片路徑，也變變為相對路徑，此時部署項目，不再出現圖片路徑404。

Vue項目打包后部分圖片不顯示

1.圖片的后綴名不能含ad字母敏感詞（即谷歌會認為是廣告，并自動刪除）

2.圖片本身（質量）的原因，跟前端無關vue 加載本地資源圖片，需讓UI給新的設計圖片。--備注：QQ直接截圖到本地的圖片打包后可能也不顯示，需跟UI要原始設計圖。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持豬先飛。