快速解决Vue项目打包样式中静态资源路径问题

发表于 | 分类于 | 评论数： | 阅读次数：

最近在使用基于Vue-cli构建的项目中,使用Webpack打包时,在样式表中引入的background-image路径,在生产环境无法显示.

导致该问题是因为:

  1. 生产环境路径与开发环境不一致
  2. 生产打包后,样式中的相对路径由webpack变为了绝对路径

举个栗子:

1
2
3
4
5
6
7
.img {
    width:1116px;
    height:554px;
    clear: both;
    background: url('../../assets/images/timg.gif') no-repeat;
    background-size:100%;
}

我们上面直接引用了相对路径. 在生产打包后,会变成绝对路径.

通用Webpack修正办法:

该办法适用于所有基于Webpack打包的情况。
我们在构建独立样式时，会使用extract-text-webpack-plugin插件。该插件可以将样式在打包后生产独立的样式表文件。
我们只需要为其添加一个属性publicPath: ‘../../‘ 即可(因为我们这里只针对样式表中的相对静态文件资源)

注意：该路径需要根据不同框架来判断， webpack在Vue项目打包后的样式表css和static之间相差两级路径。因此这里配置了两级路径

在Vue-cli构建的项目中修正:

在build / utils.js 目录中找到 修改如下：

1
2
3
4
5
6
return ExtractTextPlugin.extract({
       use: loaders,
       fallback: 'vue-style-loader',
       // 添加该路径
       publicPath: '../../'
     })

大功告成！:-P

另： 我们如果在template中定义的路径，如果引入的静态文件在assets中，将会自动转为BASE64，因此我们在模板中的引入我们无需处理。