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哈哈~