vue-cli按需引入antd樣式文件報錯問題

這個問題根據vue-cli版本和less版本不同,解決方法也不一樣,一定要先看看你自己package.josn文件里的安裝包版本

我的版本

"dependencies": {

    "core-js": "^3.6.5",

    "echarts": "^5.0.1",

    "vue": "^2.6.11",

    "vue-router": "^3.4.9"

  },

  "devDependencies": {

    "@vue/cli-plugin-babel": "~4.5.0",

    "@vue/cli-plugin-eslint": "~4.5.0",

    "@vue/cli-service": "~4.5.0",

    "ant-design-vue": "^1.7.2",

    "babel-eslint": "^10.1.0",

    "babel-plugin-import": "^1.13.3",

    "eslint": "^6.7.2",

    "eslint-plugin-vue": "^6.2.2",

    "less": "^4.1.0",

    "less-loader": "^7.2.1",

    "vue-template-compiler": "^2.6.11"

  },

我的版本vue-cli是4.x版本   less也是4.x版本

 

使用vue-cli新建項目后,安裝ant-design-vue,啟動項目就報錯了

Cannot find module 'less'

大概就是沒有找到對應的babel

安裝上less和less-loader

 

重新啟動,還是報錯

Syntax Error:

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

其實這里有個提示,讓你去githup去查看,不過當時沒看這個,又在網上搜索了一通,安裝了幾個插件,但是都不行,

 

然后去githup上搜索了一下錯誤,還真有這個問題,https://github.com/vueComponent/ant-design-vue/issues/68

根據里面的回答配置了vue.config.js文件,主要是配置紅色代碼部分

module.exports = {

  devServer: {

    port: 8090,

    open: true

  },

  configureWebpack: {

    resolve: {

      alias: {

        "@": path.resolve(__dirname, './src')

      }

    }

  },

   css:{

    requireModuleExtension: true,

    loaderOptions:{

      less:{

          javascriptEnabled: true

      }

    }

  }

}

啟動之后,又...又報錯了

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'javascriptEnabled'. These properties are valid: object { lessOptions?, additionalData?, sourceMap?, webpackImporter? }

這里就是版本不同寫法不同了,這個解決方案是3.x版本的, 4.x版本需要再加一層lessoption,這個報錯里面也有說到

正確寫法

module.exports = {
  devServer: {
    port: 8090,
    open: true
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, './src')
      }
    }
  },
  css:{
    requireModuleExtension: true,
    loaderOptions:{
      less:{
        lessOptions:{
          javascriptEnabled: true
        }
      }
    }
  }
}

再次啟動,沒有報錯了,但是打開的頁面是這樣的

 

什么樣式的都沒有了......

又查了半天,也沒找到解決方法

最后,把node-modules這個包整個刪掉,再刪掉package.json文件中一些沒用的版本記錄,重新下載包,

再次重啟,OK,頁面終於正常了

 

 所以說,如果有時候你的配置什么都沒問題,但是就是沒效果,可能是安裝包的問題,刪包重裝也不失為一個好方法O(∩_∩)O哈哈~