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 文件。