vue的webpack配置使用心得

[CodeDreamfy]

问题：当只需要将vue工程文件build后的文件作为静态html使用的时候会出现问题

重点是设置assetsPublicPath的地址：dev和prod的可以分开设置，因为经常会存在prod的文件路径不确定，可能是cdn地址，可能是其他文件的目录结构，这个时候设置assetsPublicPath就尤为必要了。

在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath，你可以先忽略它，并且在入口起点设置 webpack_public_path。

css引入背景图片路径问题

当是用sass，less的时候，在单独的样式文件引入图片的时候，一般写法是assets/img/xx.jpg类似，但是这么写的话dev编译可以成功，但是build后找不到文件路径，页面是空白的，当把assetsPublicPath的路径改成./的时候虽然页面可以显示成功，但是图片仍然加载不成功，最后解决办法是需要在build/utils.js文件ExtractTextPlugin插件增加一个属性publicPath:'../'(路径看个人情况修改)

说清楚点解决就是：经常遇见的问题是 css 中 background-image 的相对路径不能正确的引用到img 文件夹中。但是用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // 注意配置这一部分，根据目录结构自由调整
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

参考：

• 生成css文件background url() 图片路径问题
• extract-text-webpack-plugin

引入第三方库的方法

比如引入swiper库的问题