当使用vue-cli3创建项目并使用iview做UI组件库时,可能会遇到找不到javascriptEnabled
配置项的问题,这是因为javascriptEnabled
是Less-loader的配置项,而iview使用的是Less的定制主题。
为了解决该问题,需要在项目根目录下创建vue.config.js文件,在该文件中配置Less-loader的javascriptEnabled
选项。
具体步骤如下:
-
在项目根目录下创建vue.config.js文件。
-
在文件中添加以下代码:
module.exports = {
// configureWebpack选项是一个对象,其中可以设置webpack的配置
configureWebpack: {
// rules属性可以配置一系列的规则,每一个规则将会包含一个或多个loader
module: {
rules: [
// 对于less文件使用的是less-loader和css-loader进行解析
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
// 通过javascriptEnabled选项为true使得在less文件中可以使用javascript函数
javascriptEnabled: true
}
}
]
}
]
}
}
}
- 重新运行项目,此时应该就能正常运行并使用iview的定制主题了。
示例1:
<template>
<Button type="primary">测试按钮</Button>
</template>
<script>
import { Button } from 'iview';
export default {
components: {
Button
}
};
</script>
示例2:
@import '~iview/src/styles/base/index.less';
// 定义一个自定义主题变量
@myColor: #F00;
// 使用自定义主题变量
body {
background-color: @myColor;
}
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:解决vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项 - Python技术站