vue-cli4 中 vux 主题失效的问题及解决方案
- Vorherrschende Sprache
- Vue
- Sterne
- 17.5k
- Forks
- 3.6k
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
## 背景
使用 vue-cli4 创建的项目,按照 https://github.com/airyland/vux/issues/3778 的指引,使用 `@vux/loader` 来配置 `theme`,结果发现程序运行起来,vux 相关组件并没有效果。
## 问题定位
1. 按照 [vue-cli-3-example](https://github.com/airyland/vux/tree/v2/packages/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
```diff
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`
```diff
+ "@vue/cli-plugin-babel": "^3.5.0",
+ "@vue/cli-plugin-eslint": "^3.5.0",
+ "@vue/cli-service": "^3.5.0",
```
2. babel.config.js 里的内容也需要调整下
```javascript
// 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`
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Bewertung
Dieses Issue wurde noch nicht bewertet.