vue-cli4 中 vux 主题失效的问题及解决方案

[cklwblove]

背景

使用 vue-cli4 创建的项目，按照 #3778 的指引，使用 @vux/loader 来配置 theme，结果发现程序运行起来，vux 相关组件并没有效果。

问题定位

1. 按照 vue-cli-3-example 提供的例子，运行起来都是正常的
2. 自己创建的项目工程和此模板对比了下，发现 @vue/cli-service 、@vue/cli-plugin-babel、@vue/cli-plugin-eslint 的版本不一致，vue-cli4 创建的项目里，@vue/cli-service 版本是 ~4.5.0，而 vue-cli3 是 ^3.5.0。这个会影响 @vux/loader 针对 less-loader 的判断，行数在 https://github.com/airyland/vux/blob/c723dc77ed7d32884712c1159ddae9c2b4c277e6/packages/loader/src/index.js#L478。 此处可以打印下 line.loader ，就会发现区别之处。还有一点就是需要注意，less-loader 的版本如果过高（最新版本为 10.2.0），需要将 modifyVars 迁移到 line.lessOptions 属性中。可以参考 https://github.com/webpack-contrib/less-loader/blob/master/CHANGELOG.md#600-2020-04-24

if (line.loader === 'less-loader') {
+ line.lessOptions = Object.assign(line.lessOptions || {}, {
    modifyVars: variables
  })
}

或者将 less-loader 的版本降到 ^4.1.0
3. vue 的版本也有问题

解决方案

1. 将 vue-cli4 相关的 cli 插件调整成 ^3.5.0

+ "@vue/cli-plugin-babel": "^3.5.0",
+ "@vue/cli-plugin-eslint": "^3.5.0",
+ "@vue/cli-service": "^3.5.0",

2. babel.config.js 里的内容也需要调整下

// babel.config.js
module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

3. 调整 vue 及 vue-template-compiler 的版本为 2.6.12
4. less 及 less-loader 的版本调整为 ^3.0.0 、^4.1.0

[happydan]

这是来自1977130605邮箱的自动回复邮件。我将尽快给您回复。

[caozhong1996]

老哥你是真的细，先把你这个方案挂起来，你觉得有哪些地方可以修的可以提个PR👍

[shimiso]

vux/loader已经升级到2.1.1完美解决了webpack5的所有问题，总结 @caozhong1996 @cklwblove @fundon @happydan 前几位大神的努力，发出最完整的参考配置：

{
  "name": "vuxdemo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2",
    "vux": "^2.11.1",
    "axios": "^0.27.2",
    "element-ui": "^2.15.9",
    "mescroll.js": "^1.4.2",
    "moment": "^2.29.4",
    "mpvue-calendar": "^2.3.7",
    "qs": "^6.11.0",
    "quill": "^1.3.7",
    "quill-image-drop-module": "^1.0.3",
    "quill-image-resize-module": "^3.0.0",
    "quill-table": "^1.0.0",
    "superagent": "^8.0.0",
    "superagent-jsonp": "^0.2.1",
    "vant": "^2.12.48",
    "vue-photo-preview": "^1.1.3",
    "vue-quill-editor": "^3.0.6",
    "vue2-org-tree": "^1.3.6",
    "vuex-i18n": "^1.10.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vux/loader": "^2.1.1",
    "babel-polyfill": "^6.26.0",
    "crypto-browserify": "^3.12.0",
    "es6-promise": "^4.2.8",
    "js-yaml": "^4.1.0",
    "js-yaml-loader": "^1.2.2",
    "less": "^3.0.0",
    "less-loader": "^4.1.0",
    "lib-flexible": "^0.3.2",
    "object-assign": "^4.1.1",
    "sass": "^1.54.4",
    "sass-loader": "^13.0.2",
    "style": "0.0.3",
    "style-loader": "^3.3.1",
    "vue-template-compiler": "^2.6.14"
  },
  "browser": {
    "crypto": false
  }
}

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')
const vuxLoader = require('@vux/loader')

module.exports = defineConfig({
  transpileDependencies: true,

  //configureWebpack函数形式
  configureWebpack: config => {
    vuxLoader.merge(config, {
      plugins: ['vux-ui']
    })

    // 返回一个将要合并得对象
    return {
      module: {
        rules: [
          {
            test: /\.(yaml|yml)$/,
            loader: 'js-yaml-loader'
          }
        ]
      },
      plugins: [
        new webpack.ProvidePlugin({
          'window.Quill': 'quill/dist/quill.js',
          'Quill': 'quill/dist/quill.js'
        })
      ]
    }
  }
})

我搭建了一个基于vux最新版本的框架https://github.com/shimiso/Vue2FrameWork
大家可以参考，除了基于vux的自身不能升级因素意外，其他所有围绕vux兼容的工具都已经升级到最新
给还在基于vux+vue2.x开发的项目最后一点助力

[softshield]

@vux/loader，导致源码调试的代码变了，比如async await 语法糖会变成_asyncToGenerator一堆代码，这个问题现在有没有解决啊。