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浏览器看看。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试 </title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
网友评论