Vue-cli3 中 通過在index.html添加的script js文件 如何在組件內使用不會 xxx is not defined錯誤

以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

  },
}