问答

vue-cli4里如何更换ant-design的主题色

作者:admin 2021-04-20 我要评论

如题 yntax Error:// https://github.com/ant-design/ant-motion/issues/44.bezierEasingMixin();^Inline JavaScript is not enabled. Is it set in your option...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
如题
yntax Error:

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in G:\workplace\apply-antd\node_modules\ant-design-vue\lib\style\color\bezierEasing.less (line 110, column 0)

尝试的方案
1.babel.config.js里style值不管是true还是css都不起作用,依旧报错
2.vue.config.js里javascriptEnabled:true,还是不起作用~

vue.config.js

const webpack = require('webpack');
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#ff1f', // 全局主色  #1890ff
            // 'link-color': '#1890ff', // 链接色
            // 'success-color': '#52c41a', // 成功色
            // 'warning-color': '#faad14', // 警告色
            // 'error-color': '#f5222d', // 错误色
            // 'font-size-base': '14px', // 主字号
            // 'heading-color': 'rgba(0, 0, 0, 0.85)', // 标题色
            // 'text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
            // 'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文本色
            // 'disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色
            // 'border-radius-base': '4px', // 组件/浮层圆角
            // 'border-color-base': '#d9d9d9', // 边框色
            // 'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // 浮层阴影
          },
          javascriptEnabled: true,
        },
      },
    },
  },
  publicPath: process.env.MODE_ENV === 'production' ? 'https://wujy.com' : '', //根路径 cli3.0以上使用publicPath
  assetsDir: 'assets', //静态资源目录(js,css,img,fonts)这些文件都可以写里面
  outputDir: 'dist', //打包的时候生成的一个文件名
  lintOnSave: false, //是否开启eslint保存检测 ,它的有效值为 true || false || 'error'\
  devServer: {
    port: 8080,
    // open: true, //配置自动启动浏览器
    proxy: {
      "/api": {
        target: "http://localhost:8001", //后端ip地址及端口
        ws: true, //是否跨域
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    },

  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      config.mode = "production";
      // 这里修改下 
      config.optimization.minimizer = [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true, //console
              drop_debugger: true,
              pure_funcs: ['console.log'] //移除console
            }
          }
        })
      ]
      //打包文件大小配置
      config["performance"] = {
        "maxEntrypointSize": 10000000,
        "maxAssetSize": 30000000
      }
    } else {
      // 为开发环境修改配置...
      config.mode = "development";
    }

  },
  chainWebpack: config => {
    // config.plugin('provide').use(webpack.ProvidePlugin, [{
    //   $: 'jquery',
    //   jquery: 'jquery',
    //   jQuery: 'jquery',
    //   'window.jQuery': 'jquery'
    // }]);

    // 修复HMR(热更新)失效
    config.resolve.symlinks(true);
  }


}

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",
      {
        libraryName: "ant-design-vue",
        libraryDirectory: "es",
        style: "css"
      }
    ]
  ]
}
###

image.png
唉升级下less-loader到6.0即可

npm i less-loader@6.0.0

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器