vue 踩坑

[本末]

1. 安装vue-cli报错 -4058 的解决方法
   换成 cnpm

   1. 通过config命令

   npm config set registry https://registry.npm.taobao.org

   npm info underscore （如果上面配置正确这个命令会有字符串response）

   2.命令行指定

     npm --registry https://registry.npm.taobao.org info underscore
   

2. 动态 加载 img 无法显示
   原因 ：在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址
   方法1 : require
   方法二： 放入static 文件夹

3. vue-cli 2.0 版本 使用 svg 插件 svg-sprite-loader

      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

vue-cli 3.0 版本 使用 svg 插件 svg-sprite-loader

    // svg
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .include
      .add(resolve('src/assets/svg-icons/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'd2-[name]'
      })
      .end()
    // image exclude
    const imagesRule = config.module.rule('images')
    imagesRule
      .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
      .exclude
      .add(resolve('src/assets/svg-icons/icons'))
      .end()

require.context有三个参数：

directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式