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