vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项怎么解决

在使用vue-cli3创建项目并集成iview时，可能会遇到定制主题的需求。iview提供了通过less变量来定制主题的功能，但在配置过程中，可能会遇到javascriptEnabled配置项找不到的问题。本文将详细介绍如何解决这个问题。

问题描述

在vue-cli3项目中，我们通常会使用vue.config.js来配置项目的构建选项。当我们需要定制iview的主题时，通常会在vue.config.js中配置less的modifyVars选项来覆盖iview的默认样式变量。然而，在配置过程中，可能会遇到以下错误：

Error: Inline JavaScript is not enabled. Is it set in your options?

这个错误提示表明less的javascriptEnabled选项没有正确配置，导致less无法解析iview主题中的JavaScript代码。

解决方案

要解决这个问题，我们需要在vue.config.js中正确配置less的javascriptEnabled选项。以下是具体的配置步骤：

1. 安装依赖

首先，确保项目中已经安装了less和less-loader：

npm install less less-loader --save-dev

2. 配置vue.config.js

在vue.config.js中，我们需要通过chainWebpack方法来配置less-loader的选项。具体配置如下：

const path = require('path');

module.exports = {
  chainWebpack: config => {
    // 配置less-loader
    config.module
      .rule('less')
      .oneOf('normal')
      .use('less-loader')
      .tap(options => {
        options = {
          ...options,
          lessOptions: {
            javascriptEnabled: true, // 启用JavaScript
            modifyVars: {
              // 定制主题变量
              'primary-color': '#1DA57A',
              'link-color': '#1DA57A',
              'border-radius-base': '2px',
            },
          },
        };
        return options;
      });
  },
};

3. 重新编译项目

完成上述配置后，重新编译项目：

npm run serve

此时，less的javascriptEnabled选项已经正确配置，iview的主题定制应该可以正常工作了。

总结

在使用vue-cli3创建项目并集成iview时，定制主题可能会遇到javascriptEnabled配置项找不到的问题。通过正确配置vue.config.js中的less-loader选项，可以解决这个问题。希望本文的解决方案能够帮助你顺利定制iview的主题。