Vue-cli: about css assert path ,two Solution(css路径的问题解决方案)

[zhangbihua]

the CSS modules will be generated as Blobs, so relative paths don't work (they would be relative to > chrome:blob or chrome:devtools). In order for assets to maintain correct paths setting output.publicPath > property of webpack configuration must be set, so that absolute paths are generated.

style-loder 无法自己设置publicpath, 所以只能在ExtractTextPlugin后的css目录路径 和 webpack.base.conf做文章的，
解決的办法有两个，

• 一个在办法是在webpack.base.conf 里设置assetsPublicPath:'/' 根目录，assetsSubDirectory: './在服务器中的相对路径/static',
  config/index.js

    assetsSubDirectory: 'AbsolutePath/projectPath/static',
    assetsPublicPath: '/',

• 还有一个是在ExtractTextPlugin,css目录路径，把脱离出来的css路径裸在项目路径，在webpack.prod.conf中设置,

    // 不需要提到static/css 中
    //new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),  
    new ExtractTextPlugin('[name].[contenthash].css'),

config/index.js

  assetsSubDirectory: 'static',
    assetsPublicPath: './',

两种方法都可以解决css 中img问题，

在知道项目的绝对路径可以用一方法，
不知道项目的绝对路径可以用二方法，（只是css文件裸在youproject中)^-^

[zhangbihua]

issue,没想到--自问自答

[margox]

我正在用VueCli开发一个Electron应用，遇到了同样的问题，蛋疼至极
css文件里面通过src引入的字体文件，在编译后指向了static/icons/xxx.woff2，而正确的引用方式应该是'../icons/xxx/woff2',因为css/和icons/是staitc/下面的同级目录，只能用你提供的第二种方式来解决，找了半天没有其他的解决方案。。。。

[zhangbihua]

@margox 那你就点个赞吧

[margox]

已点赞，不过我还在继续找解决方案

[jrt324]

问题暂时可以解决，不过还是不够优雅....

[margox]

@jrt324 我后面写了个webpack的loader进行的硬替换。。。

[jrt324]

@margox 可以把代码贴出来看看吗？

[margox]

@jrt324
在build目录下新建一个cssPathResolver.js，内容如下：

module.exports = function (source) {

  if (process.env.NODE_ENV === 'production') {
    return source.replace('__webpack_public_path__ + "static', '"..')
  } else {
    return source
  }

}

具体要替换的内容你可能得自己调整下，这个loader要用在被css引入的资源上，而不是css，在webpack.base.conf.js里面修改下就行了，例如在我的项目里是为了解决iconfont路径不对的问题，我是这样用的：

{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loaders: [
    {
      loader: path.resolve(__dirname, 'cssPathResolver')
    },
    {
      loader: 'url-loader',
      query: {
        limit: 10000,
        name: utils.assetsPath('icons/[name].[hash:7].[ext]'),
      }
    }
  ]
}

[jinshengwuosi]

@margox 此方案会造成在页面中img的路径一并被修改。