解決vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項(xiàng)
vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項(xiàng)
vue.config.js 配置 javascriptEnabled 后依然報(bào)錯(cuò)
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.
問(wèn)題在于 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定制主題報(bào)錯(cuò)的解決
vue-cli3,iview使用定制主題時(shí)編譯報(bào)錯(cuò),如下:
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
通過(guò)修改webpack配置解決該問(wèn)題,vue-cli3中對(duì)webpack配置進(jìn)行了抽象,默認(rèn)不顯示相關(guān)的配置文件,可在項(xiàng)目根目錄下新建并修改vue.config.js
文件,項(xiàng)目運(yùn)行時(shí)自動(dòng)合并這些選項(xiàng)至webpack。
親測(cè)有如下兩種解決辦法(修改vue.config.js)
1. 簡(jiǎn)單的配置方式
module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true } } }, }
2. 鏈?zhǔn)讲僮鳎╳ebpack-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; }); } }
修改保存后重啟項(xiàng)目即可
關(guān)于webpack-chain
的用法:
由于 vue-cli3 對(duì) webpack 的抽象,我們不能直觀地查看配置文件,理解起來(lái)會(huì)比較困難,修改配置一頭霧水。所以 vue-cli-server 提供了一個(gè)方法可以將 webpack 配置完整的輸出(但不是一個(gè)有效的配置文件),并通過(guò)注釋提供了相關(guān)的使用方法。
審查命令(在項(xiàng)目根路徑下用命令行執(zhí)行):
vue inspect > output.js
得到完整的配置文件,并包含使用方法:
參考自:cli.vuejs.org
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01Vue引入vuetify框架你需要知道的幾點(diǎn)知識(shí)
這篇文章主要介紹了Vue引入vuetify框架你需要知道的幾點(diǎn)知識(shí),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06Vuex的插件vuex-persistedstate數(shù)據(jù)持久化存儲(chǔ)操作
這篇文章主要介紹了Vuex的插件vuex-persistedstate數(shù)據(jù)持久化存儲(chǔ)操作,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法
Axios是一款網(wǎng)絡(luò)前端請(qǐng)求框架,本文主要介紹了vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06詳解vue項(xiàng)目中調(diào)用百度地圖API使用方法
這篇文章主要介紹了vue項(xiàng)目中調(diào)用百度地圖API使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04