Vue-cli3 中 通过在index.html添加的script js文件 如何在组件内使用不会 xxx is not defined错误

Posted 2020-11-22 飞尽堂前燕

以jQuery 为例

第一种方法 更改webpack配置信息

1.在vue.config.js中（如果没有 请在根目录新建）配置如下信息

// const webpack = require(‘webpack‘)
module.exports = {
    configureWebpack: {
        externals: {
            ‘jQuery‘ : ‘jQuery‘,// 其中 左侧是你要import时的名字 右侧是此js抛出的全局变量名称
            ‘echarts‘: ‘echarts‘
        }
    }
};

2.在vue组件中使用

import $ from ‘jQuery‘;

 

第二种方法 更改eslint配置信息

在.eslintrc.js 中配置

1.可以关闭no-undef 检查 可以隐藏所有 未定义但已使用的 报错信息

module.exports = {
  ......
  rules: { 
　　　// 在rules规则中插入一条规则
    ‘no-undef‘: ‘off‘, // 关闭 未定义 检查
  },
}

　　

 

或者可以配置globals属性 将$ 设置为true

module.exports = {
　......
  globals: {
      $: true,
　　　　echarts: true,
　　　　d3: true

  },
}