设置html图片路径base,设置base和publicPath，以及配置chainWebpack后，图片路径不对...

修改(1)：

base: '/yuyue_test/',

publicPath: process.env.NODE_ENV === 'production' ? '/yuyue_test/' : '/',

修改(2)

chainWebpack(config, { env, webpack, createCSSRule }) {

// 修改js，js chunk文件输出目录

config.output

.filename('js/[name].[hash:8].js')

.chunkFilename( 'js/[name].[contenthash:8].chunk.js');

// 修改css输出目录

config.plugin('extract-css').tap(() => [

{

filename: `css/[name].[contenthash:8].css`,

chunkFilename: `css/[name].[contenthash:8].chunk.css`,

ignoreOrder: true,

},

]);

// 修改svg输出目录

config.module

.rule('svg')

.test(/\.(svg)(\?.*)?$/)

.use('file-loader')

.loader(require.resolve('file-loader'))

.tap(options => ({

...options,

name: 'img/[name].[hash:8].[ext]',

}));

// 修改图片输出目录

config.module

.rule('images')

.test(/\.(png|jpe?g|gif|webp|ico)(\?.*)?$/)

.use('url-loader')

.loader(require.resolve('url-loader'))

.tap(options => {

const newOptions = {

...options,

name: 'img/[name].[hash:8].[ext]',

fallback: {

...options.fallback,

options: {

name: 'img/[name].[hash:8].[ext]',

esModule: false,

},

},

};

return newOptions;

});

// 修改fonts输出目录

config.module

.rule('fonts')

.test(/\.(eot|woff|woff2|ttf)(\?.*)?$/)

.use('file-loader')

.loader(require.resolve('file-loader'))

.tap(options => ({

...options,

name: 'fonts/[name].[hash:8].[ext]',

fallback: {

...options.fallback,

options: {

name: 'fonts/[name].[hash:8].[ext]',

esModule: false,

},

},

}));

},

background-image: url(~@/assets/bg.jpg); 这里的路径就不对了，但是require的图片是对的