提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

关于vue-cli3 webpack 配置 ProvidePlugin 踩坑记。在vue-cli2中配置很简单，但是在vue-cli3中我没遇到过，今天我就尝试了一下，经过看各种文章终于大功告成了！！！！

提示：以下是本篇文章正文内容，下面案例可供参考

一、ProvidePlugin是什么？

作用：自动加载，而不必模块import或require它们无处不在。。

二、使用步骤

1.创建一个vue-cli3 以上版本的项目

代码如下（示例）：

vue create webpack

2.新增vue.config.js文件

因为在vue-cli3版本以上vue就不在帮我们创建vue.config.js文件了需要我们自己配置 下面是我已经配置好的 当然还缺少很多属性 需要自己再加：

const path = require("path");
const webpack = require("webpack");
module.exports = {
  pages: {
    index: {
      entry: "src/main.js",
      template: "index.html",
      filename: "index.html",
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
  },
  css: {
    loaderOptions: {
      // less 设置全局变量，var.js 建议使用less-to-js转换 var.less 文件
      less: {
        // globalVars,
      },
    },
  },
  // webpack 全局变量配置
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        Manba:"manba",
        R:  [path.resolve(__dirname, "src/js/common/request"), "default"] ,
      }),
    ],
  },
  devServer: {
    // port: 9256,
    // open: true,
    proxy: {
      // 此处应该配置为开发服务器的后台地址
      "/api": {
        target: "localhost",
      },
    },
  },
};

注意项目创建好之后我们不需在安装webpack 直接引入即可
在我导入文件的地方 就是R后面的 一定要一模一样 然后request下面有个index.js文件他会自动读取里面的内容 我们 只写到request即可

 // webpack 全局变量配置
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        Manba:"manba",
        R:  [path.resolve(__dirname, "src/js/common/request"), "default"] ,
      }),
    ],
  },

index.js里面写法 req内容可以自己定义 在任何地方都可以用R访问

const Req = require("./req");
module.exports  =  Req

此时是不是觉得已经大功告成了 运行起来会报错，就因为这个错误我百度了一天看了各种文章最后。。。。

    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "globals": {
            "R": true,
            "Manba": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "parserOptions": {
            "parser": "babel-eslint"
        },
        "rules": {}
    },

我们要在page.json 中的eslintConfig下面增加globals 允许使用这些全局变量 即可配置好后重启一下我们就可以在任意页面使用R去访问里面的东西

总结

坚持就是胜利