zoukankan      html  css  js  c++  java
  • vue 生产包 背景图片-background图片不显示

    vue生产包:

    css放在一个文件下,图片在img文件夹下

    通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片的

    而我们写在css background:url(../xxx/)引入的图片 ,这时打包后他的路径是从static/img/’图片名’是访问错误的,因为在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片。

    打开build/utils.js publicPath改为 publicPath:'../../',

    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,
            publicPath:'../../',
            fallback: 'vue-style-loader'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
      }
  • 相关阅读:
    [恢]hdu 2203
    [恢]hdu 2089
    [恢]hdu 1597
    [恢]hdu 1239
    [恢]hdu 2141
    [恢]hdu 2152
    [恢]hdu 2078
    [恢]hdu 2304
    [恢]hdu 1799
    非金钱激励员工的108种手段 ,你一定要懂!
  • 原文地址:https://www.cnblogs.com/shine-lovely/p/12859132.html
Copyright © 2011-2022 走看看