在vue-cli 4.x中使用vant出現(xiàn)的問(wèn)題,在這里記錄一下

一. 如果使用按需加載,需要下載babel-plugin-import轉(zhuǎn)換一下,下載 babel-plugin-import

cnpm install babel-plugin-import -D

**二. 在根目錄中找到 babel.config.js 文件 , 添加字段 **

"plugins": [
  ["import",{
   "libraryName":"vant",
   "style":true
   }
  ]
 ]
最終我的配置是這樣的
module.exports = {
 presets: [
  '@vue/cli-plugin-babel/preset',
 ],
 "plugins": [
  ["import",{
   "libraryName":"vant",
   "style":true
   }
  ]
 ]
}

接下來(lái)重啟項(xiàng)目一下。

補(bǔ)充知識(shí)：vue cli 3 升級(jí)到 vue cli 4 方法步驟及升級(jí)點(diǎn)總結(jié)

官方升級(jí)英文文檔，中文文檔相對(duì)滯后。

簡(jiǎn)介：vue cli 4 官方已經(jīng)更新有一段時(shí)間了，現(xiàn)在是4.0.5 版本，看了官方文檔大概有二十幾點(diǎn)的更新，還是干貨滿滿呀，值得升級(jí)一下，下面是升級(jí)步驟。

一.首先，在全局安裝最新的 Vue CLI：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

檢查安裝的版本

vue -V # 輸出:@vue/cli 4.x.x 說(shuō)明@vue/cli 4安裝成功( vue cli 3的版本會(huì)輸出 3.x.x )

踩坑記錄

npm install -g @vue/cli 執(zhí)行成功，但是執(zhí)行 vue -V 輸出的還是3.5.6(我以前安裝的版本)，

于是又重新執(zhí)行 npm install -g @vue/cli，顯示成功，執(zhí)行 vue -V 輸出的還是3.5.6，

一臉懵逼 ，然后重啟電腦，再執(zhí)行vue -V 輸出 @vue/cli 4.0.5，解決 。

二.在項(xiàng)目根目錄下執(zhí)行

vue upgrade

然后出現(xiàn)

提示 繼續(xù)升級(jí)這些插件嗎？ 輸入 Y 即可.

三.等步驟二 執(zhí)行完會(huì)發(fā)現(xiàn)主要有 2 個(gè)文件被修改

1.文件 babel.config.js

主要是 babel 的預(yù)設(shè)由@vue/app 改成了@vue/cli-plugin-babel/preset

原來(lái)的

module.exports = {
 presets: [
  '@vue/app', // 這行
  [
   '@babel/preset-env',
   {
    useBuiltIns: 'entry'
   }
  ]
 ]
}

升級(jí)后的

module.exports = {
 presets: [
  '@vue/cli-plugin-babel/preset', // 這行
  [
   '@babel/preset-env',
   {
    useBuiltIns: 'entry'
   }
  ]
 ]
}

2.文件 package.json （package-lock.json 也會(huì)更改）

主要是依賴(lài)升級(jí)

原來(lái)的

{
 "@vue/cli-plugin-babel": "^3.11.0",
 "@vue/cli-plugin-eslint": "^3.11.0",
 "@vue/cli-service": "^3.11.0"
}

升級(jí)后的

{
 "@vue/cli-plugin-babel": "^4.0.5",
 "@vue/cli-plugin-eslint": "^4.0.5",
 "@vue/cli-service": "^4.0.5"
}

四.然后啟動(dòng)項(xiàng)目

npm run serve

然后報(bào)下面的錯(cuò)

1.第一個(gè)錯(cuò)（警告）

WARN A new version of sass-loader is available. Please upgrade for best experience.

這行是 vue cli 4 升級(jí)了自己的依賴(lài) sass-loader 導(dǎo)致的

它把 sass-loader由 ^7.x.x 的版本升級(jí)到了 ^8.0.0,而我項(xiàng)目中使用的是^7.1.0

所以升級(jí)一下自己項(xiàng)目的 sass-loader 就好了

執(zhí)行下面命令即可

npm i sass-loader@8.0.0 -D

2.然后第二個(gè)錯(cuò)說(shuō)沒(méi)有安裝core-js

vue cli 4把 core-js由 ^2.x.x 的版本升級(jí)到了 ^3.x.x

于是安裝一下

npm i core-js

然后重啟項(xiàng)目還是不行，看了下官方文檔和 babel 有關(guān)

main.js 代碼中

import '@babel/polyfill'

隱藏這個(gè)代碼

重啟好了

然后把 @babel/polyfill 換成 babel-polyfill 即可

npm i babel-polyfill

main.js 代碼中 改為

import 'babel-polyfill'

五.vue cli 4 主要升級(jí)點(diǎn)總結(jié)

1."@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"由 v3 的版本升級(jí)到了 v4

2.sass-loader由 v7 的版本升級(jí)到了 v8

3.core-js由 v2 的版本升級(jí)到了 v3

4.webpack-chain由 v4 的版本升級(jí)到了 v6

5.css-loader由 v1 的版本升級(jí)到了 v3

6.url-loader由 v1 的版本升級(jí)到了 v2

7.file-loader由 v3 的版本升級(jí)到了 v4

8.copy-webpack-plugin由 v4 的版本升級(jí)到了 v5

9.terser-webpack-plugin由 v1 的版本升級(jí)到了 v2

10.@vue/cli-plugin-pwa由 v3 的版本升級(jí)到了 v4

11.新增插件 vue add vuex vue add router

12.pug-plain已重命名為pug-plain-loader

13.默認(rèn)目錄結(jié)構(gòu)已更改

src/store.js 改為 src/store/index.js

src/router.js 改為 src/router/index.js

14.由于兼容性原因，仍支持 router＆routerHistoryMode 選項(xiàng) preset.json

但是現(xiàn)在建議使用它來(lái) plugins: { '@vue/cli-plugin-router': { historyMode: true } }

獲得更好的一致性

15.api.hasPlugin('vue-router')不再受支持，現(xiàn)在 api.hasPlugin('router')

16.lintOnSave 選項(xiàng)的默認(rèn)值（未指定時(shí)）從 true 更改為 default

17.廢棄vue-cli-service test:e2e

18.@vue/cli-plugin-e2e-nightwatch Nightwatch.js已從0.9升級(jí)到1.x

19.@vue/cli-plugin-unit-mocha 升級(jí)到Mocha 6

20.@vue/cli-plugin-unit-jest jest由 v23 升級(jí)到v24

21.@vue/cli-plugin-typescript 更好的ts(x)支持 ，勝過(guò)js(x)

參考鏈接

vue cli 4 官方英文升級(jí)文檔

以上這篇Vant 在vue-cli 4.x中按需加載操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論