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

 更新时间:2023年04月18日 14:23:02   作者:玫瑰花开一片一片  
这篇文章主要介绍了解决vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

vue.config.js 配置 javascriptEnabled 后依然报错

css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

问题在于  less-loader  版本。  最新版为 6.1.0

查看 package.json 文件中的 less-loader

卸载 npm un less-loader 

npm un less-loader 

重新安装 npm i less-loader@4.1.0

npm i less-loader@4.1.0 -D

vue-cli3 iview定制主题报错的解决

vue-cli3,iview使用定制主题时编译报错,如下:

ERROR  Failed to compile with 1 errors                          00:12:26

error  in ./src/css/theme.less

Module build failed (from ./node_modules/less-loader/dist/cjs.js):


// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in g:\******\node_modules\iview\src\styles\color\bezierEasing.less (line 110, column 0)

 @ ./src/css/theme.less 4:14-225 14:3-18:5 15:22-233
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.4:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

报错截图

通过修改webpack配置解决该问题,vue-cli3中对webpack配置进行了抽象,默认不显示相关的配置文件,可在项目根目录下新建并修改vue.config.js文件,项目运行时自动合并这些选项至webpack。

亲测有如下两种解决办法(修改vue.config.js)

1. 简单的配置方式

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

2. 链式操作(webpack-chain)

module.exports = {
  chainWebpack: config => {
    config.module.rule('less').oneOf('vue-modules').use('less-loader').tap(options => {
      options.javascriptEnabled = true;
      return options;
    });
    config.module.rule('less').oneOf('vue').use('less-loader').tap(options => {
      options.javascriptEnabled = true;
      return options;
    });
    config.module.rule('less').oneOf('normal-modules').use('less-loader').tap(options => {
      options.javascriptEnabled = true;
      return options;
    });
    config.module.rule('less').oneOf('normal').use('less-loader').tap(options => {
      options.javascriptEnabled = true;
      return options;
    });
  }
}

修改保存后重启项目即可

关于webpack-chain的用法:

由于 vue-cli3 对 webpack 的抽象,我们不能直观地查看配置文件,理解起来会比较困难,修改配置一头雾水。所以 vue-cli-server 提供了一个方法可以将 webpack 配置完整的输出(但不是一个有效的配置文件),并通过注释提供了相关的使用方法。

审查命令(在项目根路径下用命令行执行):

vue inspect > output.js

得到完整的配置文件,并包含使用方法:

相关注释

参考自:cli.vuejs.org

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容的实现代码

    这篇文章主要介绍了vue项目中在可编辑div光标位置插入内容的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Vue引入vuetify框架你需要知道的几点知识

    Vue引入vuetify框架你需要知道的几点知识

    这篇文章主要介绍了Vue引入vuetify框架你需要知道的几点知识,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vant的picker的坑及解决

    vant的picker的坑及解决

    这篇文章主要介绍了vant的picker的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 使用Vue逐步实现Watch属性详解

    使用Vue逐步实现Watch属性详解

    这篇文章主要介绍了使用Vue逐步实现Watch属性详解,watch对象中的value分别支持函数、数组、字符串、对象,较为常用的是函数的方式,当想要观察一个对象以及对象中的每一个属性的变化时,便会用到对象的方式
    2022-08-08
  • Vue仿今日头条实例详解

    Vue仿今日头条实例详解

    这篇文章主要介绍了Vue仿今日头条实例详解,并把相关代码做了说明,对此有兴趣的朋友参考下吧。
    2018-02-02
  • Vue超详细讲解重试机制示例

    Vue超详细讲解重试机制示例

    这篇文章主要介绍了Vue重试机制示例,重试指的是当加载出错时,有能力重新发起加载组件的请求。异步组件加载失败后的重试机制,与请求服务端接口失败后的重试机制一样
    2023-01-01
  • Vuex的插件vuex-persistedstate数据持久化存储操作

    Vuex的插件vuex-persistedstate数据持久化存储操作

    这篇文章主要介绍了Vuex的插件vuex-persistedstate数据持久化存储操作,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • vue中Axios添加拦截器刷新token的实现方法

    vue中Axios添加拦截器刷新token的实现方法

    Axios是一款网络前端请求框架,本文主要介绍了vue中Axios添加拦截器刷新token的实现方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Mixin混入分发Vue组件可复用功能基础示例

    Mixin混入分发Vue组件可复用功能基础示例

    这篇文章主要为大家介绍了Mixin混入分发Vue组件可复用功能基础示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    这篇文章主要介绍了vue项目中调用百度地图API使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论