zoukankan      html  css  js  c++  java
  • Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下:

    1,找到 config->index.js里面,如下修改

    默认配置:
      env: require('./prod.env'),
      index: path.resolve(__dirname, '../dist/index.html'),
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',


    修改为:
      env: require('./prod.env'),
      index: path.resolve(__dirname, '../hgpc/index.html'),
      assetsRoot: path.resolve(__dirname, '../hgpc'),
      assetsSubDirectory: './static',
      assetsPublicPath: './',

    2,找到 build->utils.js,在里面加入一句publicPath:'../../',

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

    3,配置修改完成,接下来,使用有两种方式,这里一般和文件结构有关,下面是我的文件结构下的使用

     注意事项(分两种情况):

    第一种:图片资源放在 assets->img文件夹下面

    1,img标签引入图片

    <img src="../assets/img/loginback.png" class="test-img" />

    2,css使用图片

    background: url('../assets/img/loginback.png') no-repeat top left ;

    第二种:图片资源放在static->img文件夹下面

    1,img标签引入图片

    <img src="../../static/img/loginback.png" class="test-img" /><br><img src="static/img/loginback.png" class="test-img" />

    2,css使用图片

    background: url('../../static/img/loginback.png') no-repeat top left ;
    用心做它,真心体会.
  • 相关阅读:
    js html table转json 反向生成数据源
    用命令提示符 打开 asp.net Development Server
    asp.net 'Sys'未定义 解决方案
    js form转换成Hash格式
    【转】NSIS 常用安装路径
    Linq lamdba GroupJoin外连接示例
    CDN简单了解
    获取android入口activity
    解决IE6下 li 的 float:left 自动换行
    WinForm窗口基础配置
  • 原文地址:https://www.cnblogs.com/maqingyuan/p/8445008.html
Copyright © 2011-2022 走看看