• 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哈哈~
     
  • 相关阅读:
    牛客网暑期ACM多校训练营(第三场)2018 A,PACM Team ( 01背包裸题 )
    牛客网暑期ACM多校训练营(第三场)2018 C , Shuffle Cards ( rope )
    简单的计算几何
    数论基本定理
    HDU-1698 Just a Hook
    HDU-1754 I Hate It ( 线段树入门 + update操作 )
    Base64
    openssl生成RSA非对称密钥---Windows
    AES-对称加密
    DES-对称加密
  • 原文地址:https://www.cnblogs.com/steamed-twisted-roll/p/14296660.html
Copyright © 2020-2023  润新知