zoukankan      html  css  js  c++  java
  • vue-cli3项目引用zepto报$不存在怎么处理

    异常描述:

    查了下,是这个原因导致的:

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

    操作步骤:

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

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

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

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

     1 /**
     2  * 项目配置文件
     3  * vue.config.js
     4  */
     5 module.exports = {
     6   chainWebpack: config => {
     7     //1.项目通用标题(如果需要就配置,不需要这部分可以删除)
     8     config
     9       .plugin('html')
    10       .tap((args) => {
    11         args[0].title = 'vue-cli3';
    12         return args;
    13       });
    14     //2.支持zepto的配置
    15     config.module
    16       .rule('zepto')
    17       .test(require.resolve('zepto'))
    18       .use('exports')
    19       .loader('exports-loader?window.Zepto')
    20       .end()
    21       .use('script')
    22       .loader('script-loader')
    23       .end()
    24     //3.释放$(index.html中引用需要,如果是main.js中导入则不需要)
    25     config
    26       .plugin('env')
    27       .use(require.resolve('webpack/lib/ProvidePlugin'), [{
    28         $: 'zepto'
    29       }])
    30   }
    31 }

    如上,第二项配置是支持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 文件。

  • 相关阅读:
    IO流遍历文件夹下所有文件问题
    java异常处理和自定义异常利用try和catch让程序继续下去(回来自己再写个例子试运行下)
    IO流读取文件内容时,出现空格的问题(未找到原因)
    查看程序运行时间的例子
    OOP和
    java语言的特点
    java三大版本解析
    关于培训的一些文章
    Android-自定义开关(ViewGroup版)
    Android-自定义开关(升级版)
  • 原文地址:https://www.cnblogs.com/xyyt/p/13860334.html
Copyright © 2011-2022 走看看