Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
cklwblove opened this issue Dec 30, 2021 · 5 comments
Open

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

cklwblove opened this issue Dec 30, 2021 · 5 comments

Comments

@cklwblove
Copy link

cklwblove commented Dec 30, 2021

背景

使用 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",
  1. babel.config.js 里的内容也需要调整下
// babel.config.js
module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}
  1. 调整 vue 及 vue-template-compiler 的版本为 2.6.12
  2. less 及 less-loader 的版本调整为 ^3.0.0^4.1.0
@happydan
Copy link

happydan commented Dec 30, 2021 via email

@caozhong1996
Copy link
Collaborator

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

@caozhong1996 caozhong1996 pinned this issue Dec 30, 2021
@shimiso
Copy link

shimiso commented Aug 18, 2022

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
Copy link

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

@Dengpei1688
Copy link

vux支持vue-cli5的vue2.7、vue3吗?

求大神指点迷津

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants