Vue-Devtools 使用问题

Q:
Vue.js devtool插件安装后无法使用,出现提示“vue.js not detected”的解决办法
A:
1、找到了Vue.js devtool插件的安装目录后,打开mainifest.json文件(这是关键)
将mainfest.json中代码persistent:false,修改成persistent:true。
2、 修改文件:vue-devtools-dev/packages/shell-chrome/webpack.config.js
我的内容如下:

const path = require('path')
const { createConfig } = require('@vue-devtools/build-tools')

module.exports = createConfig({
  entry: {
    hook: './src/hook.js',
    devtools: './src/devtools.js',
    background: './src/background.js',
    'devtools-background': './src/devtools-background.js',
    backend: './src/backend.js',
    proxy: './src/proxy.js',
    detector: './src/detector.js'
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js'
  },
    
    if (process.env.NODE_ENV === 'production') {
            module.exports.devtool = '#source-map'
            // http://vue-loader.vuejs.org/en/workflow/production.html
            module.exports.plugins = (module.exports.plugins || []).concat([
                new webpack.DefinePlugin({
                    'process.env': {
                        NODE_ENV: '"development"'
                    }
                }),
                new webpack.optimize.UglifyJsPlugin({
                    sourceMap: true,
                    compress: {
                        warnings: false
                    }
                }),
                new webpack.LoaderOptionsPlugin({
                    minimize: true
                })
            ])
        }
})

3、有了这二步,就可以调试VUE项目了。如果图标还是灰色,应该的你打开的文件不是VUE格式的。要不你保存如下内容到桌面的一个文件 ,如hello.html. 然后拖到 chrome浏览器看看。





Vue 测试 



{{ message }}

你可能感兴趣的:(Vue-Devtools 使用问题)