Vueプロジェクトbuild後、画像がロードされません
1808 ワード
vueプロジェクトは、buildの後に画像を処理する、具体的な処理方法はファイルwebpackである.base.conf.jsには、次のコードがあります.
以上のコードではurl-loaderを使用してピクチャのサイズを制限し、limit内でwebpackはピクチャをbase 64に変換し、limit制限を超えてfile-loader処理に渡す.limitの範囲内であれば、画像がロードされないことはありません.limitを超えると、webpackは処理後のピクチャをdist/static/img/に配置し、ロードピクチャは表示されません.具体的なやり方は以下の通りである:1、config/index.jsファイル内、コードの変更:(index.jsのコードの一部をリスト)
assetsPublicPathフィールドの値は、前の'/'から'./'に変更されます.2、webpack.prod.conf.jsファイル内、outputフィールド、追加コード(publicPath:'./'):
3、utils.jsファイルにpublicPath:'./../',コードは次のとおりです.
以上の手順の操作が完了すると、npm run buildはbuild後、distのindexを実行する.htmlページのlink、scriptラベルの導入経路が相対経路になる.同時に、関連するピクチャパスも、相対パスとなり、このとき配置項目は、ピクチャパス404が現れなくなる.
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 1k-----
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
]
}
以上のコードではurl-loaderを使用してピクチャのサイズを制限し、limit内でwebpackはピクチャをbase 64に変換し、limit制限を超えてfile-loader処理に渡す.limitの範囲内であれば、画像がロードされないことはありません.limitを超えると、webpackは処理後のピクチャをdist/static/img/に配置し、ロードピクチャは表示されません.具体的なやり方は以下の通りである:1、config/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: './',
}
assetsPublicPathフィールドの値は、前の'/'から'./'に変更されます.2、webpack.prod.conf.jsファイル内、outputフィールド、追加コード(publicPath:'./'):
output: {
publicPath: './', //
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
3、utils.jsファイルにpublicPath:'./../',コードは次のとおりです.
// (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、scriptラベルの導入経路が相対経路になる.同時に、関連するピクチャパスも、相対パスとなり、このとき配置項目は、ピクチャパス404が現れなくなる.