vue cli项目,build后图片路径的问题?

1、使用vue init webpack-simple构建了项目,目录结构如下图
图片描述

2、在vue的组件中
<img src="/static/clinicpackage/clinicbanner.jpg" alt="">
引入图片
3、项目部署后,由于项目使放在域名http···.com/static下面,图片的路径就错了,请问怎么解决?

阅读 2.9k
3 个回答

assetsPublicPath: './'

assetsPublicPath: './'

utils.js

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

webpack.base.conf

{
   test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
   loader: 'url-loader',
   options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]'),
     outputPath: process.env.NODE_ENV === 'production' ? '../' : ''
  }
},

可以看看web pack 怎么配置 可以把图片物理上消失,打包成bace64 还可以减少连接次数哦

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题