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: {
// ...
}
}
