Less 在 Vue 项目中报 Inline JavaScript is not enabled. Is it set in your options? 错误：原因及解决办法

在 Vue 项目中使用 Less 时，可能会遇到一个常见的错误：Inline JavaScript is not enabled. Is it set in your options?。这个错误意味着您在 Less 代码中使用了内联 JavaScript，而 Less 编译器无法识别并处理它。

错误原因：

Less 编译器默认情况下不支持内联 JavaScript。这是因为 Less 是一种 CSS 预处理器，其主要作用是将 Less 代码编译成 CSS 代码。内联 JavaScript 是一种特殊的语法，它允许您在 HTML 或 CSS 代码中直接嵌入 JavaScript 代码。Less 编译器无法识别和处理这种特殊的语法，因此会抛出这个错误。

解决方案：

要解决这个问题，有两种方法：

1. 避免在 Less 代码中使用内联 JavaScript。

这是最简单的方法。在编写 Less 代码时，避免使用内联 JavaScript。如果您需要在 Less 代码中使用 JavaScript，可以使用 Less 的 mixin 功能来实现。

2. 在 Less 编译器选项中启用内联 JavaScript。

如果您确实需要在 Less 代码中使用内联 JavaScript，则可以在 Less 编译器选项中启用内联 JavaScript 支持。在 Vue 项目中，您可以在 vue.config.js 文件中配置 Less 编译器选项。

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
};

启用内联 JavaScript 支持后，Less 编译器将能够识别和处理内联 JavaScript 代码。但是，需要注意的是，启用内联 JavaScript 支持可能会降低 Less 编译器的性能。

结论

Inline JavaScript is not enabled. Is it set in your options? 错误是一个常见的 Less 错误，其原因是 Less 编译器默认情况下不支持内联 JavaScript。解决这个问题的两种方法是：避免在 Less 代码中使用内联 JavaScript 或在 Less 编译器选项中启用内联 JavaScript 支持。