webpack+vue项目报错处理参考

最近再用vue+webpack做项目，不得不说vue用起来还是很爽的，不过webpack用起来不太熟练踩了不少坑，以后会陆续整理出来供大家参考

打包后不能显示图片字体等资源

引入本地图片后dev模式下正常，但是打包后发现无法显示图片，后台发现路径不对，需要修改file-loader的相关配置。
我的情况解决办法是在配置文件中改为相对路径
在webpack.config.js中，输出文件路径下改为相对路径

  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',   //此处改为相对路径'./dist/'或者你自己的目录
    filename: 'build.js'
  },

再次运行npm run build这下打包完的文件就显示正常了。
不过这个方法虽然简单粗暴，回到但是开发模式发现不能热更新了，此时删掉打包完的文件会发现所有文件路径都失效了，所以更改全局路径只能是权宜之计，除非你不嫌麻烦每次都重新build再本地运行。

经过一番搜索，后来发现file-loader官方文档中有一个添加相对路径参数

image.png

      {
        test: /\.(png|jpg|gif|svg)$/,          //添加你的文件类型
        loader: 'file-loader',
        options: {
          useRelativePath: true,       //相对路径改成true
          name: '[name].[ext]'
        }
      }

这样大概就能解决了，另外要注意路径不对vue-devtool是不会报错的