VUE打包图片,icon图标不显示解决方案
第一:使用element框架的icon时候,开发环境下是没有问题的,打包完以后出现小方块,页面不显示,解决办法:找到utils.js文件,加 publicPath: ‘…/…/’function generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, post...
·
第一:使用element框架的icon时候,开发环境下是没有问题的,打包完以后出现小方块,页面不显示, 解决办法:找到utils.js文件,如下图,
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// 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: '../../',//解决ele小图标出不来问题
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
第二:打包完以后路径不对了,加载文件,图片不出来
解决办法:找到config里面的index.js,加入assetsPublicPath: ‘./’,
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //解决打包完路径不对的问题
第三.调大
第四:阿里巴巴icon图标,加上HTTP
第五:data里写的图片路径,所以需要把路径换为 ‘./static/imgs/XXXX.png’
data () {
return {
//审核状态
state: '',
roledata: [
{name: '1', img: './static/imgs/XXX.png'},
{name: '2', img: './static/imgs/XXX.png'},
{name: '3', img: './static/imgs/XXX.png'},
{name: '4', img: './static/imgs/XXX.png'},
]
}
},
以后吧路径统一写成‘./static/imgs/XXXX.png’ 本地也能访问到,打包后就不会冲突
更多推荐
已为社区贡献6条内容
所有评论(0)