DevTools in vue.js答案

【问题标题】：DevTools in vue.jsDevTools in vue.js
【发布时间】：2018-07-14 23:53:03
【问题描述】：

我在 Laravel 5.5.33（不是 SPA）中使用 vue.js。我遇到了错误。

如何启用 DevTools？

【问题讨论】：

您的问题的解决方案是什么？

【解决方案1】：

确保您的 app.js 文件中有此设置

Vue.config.devtools = true

如果你使用的是mix，请检查webpack.mix中vue的dist，确保不要使用min version

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.js'
            }
        }
    });

在 dev 中运行你的 npm

npm run watch

警告如果您在浏览器中刷新页面，则不会刷新缓存。清理缓存以重新加载 app.js

【讨论】：

【解决方案2】：

但是，对我来说，在创建 Vue 应用程序后，当我将下面答案中提供的行放入时，DevTools 的问题就解决了。

你的代码应该是这样的

new Vue({
 el: '#app',
 data () {
   text: 'testData'
 }
})

Vue.config.devtools = true

【讨论】：

【解决方案3】：

当使用生产级构建时，这是一个老问题。

您可能正在使用来自 CDN 的 Vue，并且可能正在使用生产构建 (dist/vue.min.js)。将其替换为开发版本 (dist/vue.js) 或将 Vue.config.devtools = true 添加到主 js 文件中。

查看 github link。

【讨论】：