vue-cli3项目引用zepto报$不存在怎么处理

异常描述：

查了下，是这个原因导致的：

只使用了 AMD 规范的模块导出方法 define，没有用 CommonJs 规范的方法 module.exports 来导出模块，不过这不是造成报错的原因。

操作步骤：

第一步：安装 script-loader exports-loader:

npm install script-loader exports-loader --save-dev

第二步：对项目进行配置以支持zepto:

项目根目录下创建vue.config.js文件，编写以下代码：

/**
 * 项目配置文件
 * vue.config.js
 */
module.exports = {
  chainWebpack: config => {
    //1.项目通用标题（如果需要就配置，不需要这部分可以删除）
    config
      .plugin('html')
      .tap((args) => {
        args[0].title = 'vue-cli3';
        return args;
      });
    //2.支持zepto的配置
    config.module
      .rule('zepto')
      .test(require.resolve('zepto'))
      .use('exports')
      .loader('exports-loader?window.Zepto')
      .end()
      .use('script')
      .loader('script-loader')
      .end()
    //3.释放$(index.html中引用需要，如果是main.js中导入则不需要)
    config
      .plugin('env')
      .use(require.resolve('webpack/lib/ProvidePlugin'), [{
        $: 'zepto'
      }])
  }
}

如上，第二项配置是支持zepto的主要配置，第三项配置是针对index.html中直接引用zepto.js的，如果是main.js中引入，那么不需要这个配置了。

第三步，安装zepto:

有两种方式：

index.html直接引用zepto.js文件

<script src="<%= BASE_URL %>js/zepto.min.js" type="text/javascript"></script>

vue.config.js的配置如下：

/**
 * 项目配置文件
 * vue.config.js
 */
module.exports = {
  chainWebpack: config => {   
    //支持zepto的配置
    config.module
      .rule('zepto')
      .test(require.resolve('zepto'))
      .use('exports')
      .loader('exports-loader?window.Zepto')
      .end()
      .use('script')
      .loader('script-loader')
      .end()
    //释放$(index.html中引用需要，如果是main.js中导入则不需要)
    config
      .plugin('env')
      .use(require.resolve('webpack/lib/ProvidePlugin'), [{
        $: 'zepto'
      }])
  }
}

2.使用npm安装zepto，然后main.js中引入： 

npm install zepto --save

main.js：

import $ from 'zepto'

vue.config.js配置如下：

/**
 * 项目配置文件
 * vue.config.js
 */
module.exports = {
  chainWebpack: config => {
    //支持zepto的配置
    config.module
      .rule('zepto')
      .test(require.resolve('zepto'))
      .use('exports')
      .loader('exports-loader?window.Zepto')
      .end()
      .use('script')
      .loader('script-loader')
      .end()
    //释放$(index.html中引用需要，如果是main.js中导入则不需要)
    config
      .plugin('env')
      .use(require.resolve('webpack/lib/ProvidePlugin'), [{
        $: 'zepto'
      }])
  }
}

然后，就可以愉快的使用zepto了。

注意事项：

上面两种方式安装方式都可以，但是不管用哪种方式，都是需要安装 exports-loader  script-loader 这两个依赖组件，且要配置 vue.config.js 文件。