运行时 Vue 错误 Laravel 8 和 Jetstream VUE_PROD_DEVTOOLS 未定义答案

【问题标题】：Runtime Vue error Laravel 8 and Jetstream VUE_PROD_DEVTOOLS not defined运行时 Vue 错误 Laravel 8 和 Jetstream VUE_PROD_DEVTOOLS 未定义
【发布时间】：2021-05-29 04:16:27
【问题描述】：

我收到此错误：

app.js?id=37395f80948d4d99f537:2 Uncaught ReferenceError: VUE_PROD_DEVTOOLS 未在 Module.5166 中定义 (app.js?id=37395f80948d4d99f537:2)

当我使用 Jetstream 运行新的 Laravel 8 安装时，运行 npm run prod。它适用于npm run dev。使用 prod 版本根本不会呈现主页。我在 Chrome 中安装了 Vue 开发工具扩展，并打开了允许访问文件 URL 选项。

【问题讨论】：

我也有同样的问题！

标签： laravel vue.js npm

【解决方案1】：

来自 Laracasts 的 George Brotherston 和 WeAreModus 都是对的，fbloggs。

使用 Vue 3.0.0-rc.3 时，您需要明确设置 __VUE_PROD_DEVTOOLS__。

此错误已在 v3.0.7 中修复。

See Github issue resolution

See docs

Bundler 构建功能标志从 3.0.0-rc.3 开始，esm-bundler 构建现在公开了可以在编译时覆盖的全局功能标志：

VUE_OPTIONS_API（启用/禁用选项 API 支持，默认：true）

VUE_PROD_DEVTOOLS（在生产环境中启用/禁用 devtools 支持，默认值：false）该构建将在不配置这些标志的情况下工作，但是强烈建议正确配置它们以便在最终捆绑包中获得正确的 tree-shaking。要配置这些标志：

webpack：使用 DefinePlugin

汇总：使用@rollup/plugin-replace

Vite：默认配置，但可以使用define选项覆盖

注意：替换值必须是布尔字面量，不能是字符串，否则捆绑器/压缩器将无法正确评估条件。

【讨论】：

谢谢。我接受了另一个答案，尽管我很感激您在文档中向我展示了这一点。我仍然认为这是一个错误-您引用的文档明确指出“构建将在不配置这些标志的情况下工作”-我不明白为什么它应该在开发中工作而不是在生产中工作。显然没有定义默认的 false。

【解决方案2】：

我遇到了同样的错误，并且能够通过确保“webpack.config.js”具有以下内容来解决它：

const webpack = require('webpack')

module.exports = {
plugins: [
new webpack.DefinePlugin({
__VUE_PROD_DEVTOOLS__: 'false'
})
],
};

这是对 webpack.config.js 文件中其他内容的补充。

另请注意，npm run prod 可能与 npm run production 不同

我在https://github.com/visualfanatic/vue-svg-loader/issues/136

找到了这个解决方案

【讨论】：