vue-cli2/3下使用vue-devtools插件

vue-devtools是Google扩展工具，用来调试vue项目很方便
安装方法：
1.先下载，git:https://github.com/vuejs/vue-devtools

npm install
npm run build

2.把生成的\shells\chrome目录下的manifest.json打开修改

 "persistent": true //改为true

3.Google浏览器打开，设置---扩展程序，然后把\shells\chrome整个目录拖到当前页面，或者选择手动加载，加载后直接刷新，看是否成功

TIM截图20190521102732.jpg

此时你看到浏览器地址后会多一个灰色的vue图标，说明插件安装成功，但项目还没相应配置

h.jpg

4.修改项目里的配置文件，此时就要看你项目用的是vue-cli2还是3了
如果是vue-cli2,在build----webpack.base.conf.js添加

plugins: [
    new webpack.DefinePlugin({
      'process.env':{
        NODE_ENV:'"development"'
      }
    })
  ],

如果是vue-cli3，在vue.config.js中添加

// 第三方插件配置
    pluginOptions: {
        'process.env':{
            NODE_ENV:'"development"'
        }
    }

5.重启项目

TIM截图20190521102348.jpg

当你在地址栏后面看到vue的图标的时候，说明已安装成功，如果是灰色的，说明项目配置文件修改的不正确，请再次确认

vue.config.js是需要自己手动添加的文件，如果项目里没有，记得自己添加，具体配置请看相关资料

#vue.config.js 完整默认配置
module.exports = {
     // 基本路径
     baseUrl: '/',
     // 输出文件目录
     outputDir: 'dist',
     // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
     assetsDir: '',
     // 以多页模式构建应用程序。
     pages: undefined,
     // eslint-loader 是否在保存的时候检查
     lintOnSave: true,
     // 是否使用包含运行时编译器的Vue核心的构建。
     runtimeCompiler: false,
     // 默认情况下babel-loader忽略其中的所有文件node_modules。
     transpileDependencies: [],
     // 生产环境sourceMap
     productionSourceMap: true,
     // webpack配置
     configureWebpack: () => {},
     chainWebpack: () => {},
     // css相关配置
     css: {
      // 启用 CSS modules
      modules: false,
      // 是否使用css分离插件
      extract: true,
      // 开启 CSS source maps?
      sourceMap: false,
      // css预设器配置项
      loaderOptions: {},
     },
     // webpack-dev-server 相关配置
     devServer: {
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      proxy: null, // 设置代理
      before: app => {}
     },
     // enabled by default if the machine has more than 1 cores
     parallel: require('os').cpus().length > 1,
     // PWA 插件相关配置
     pwa: {},
     // 第三方插件配置
     pluginOptions: {
      // ...
     }
}

参考
https://www.cnblogs.com/tanyongli/p/7554045.html

https://blog.csdn.net/qq_35167373/article/details/80671346