vue cli 3 升级到 vue cli 4 方法步骤及升级点总结「建议收藏」

vue cli 3 升级到 vue cli 4 方法步骤及升级点总结「建议收藏」vuecli3升级到vuecli4指南vuecli3升级到vuecli4方法步骤及升级点总结vue-cli3升级vue-cli4官方英文升级文档,中文滞后一.首先,在全局安装最新的VueCLI:npminstall-g@vue/cli#ORyarnglobaladd@vue/cli检查安装的版本vue-V#输出:@vue/cli4.x.x说明@vue/cli4安装成功(vuecli3的版本会输出3.x.x)

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

vue cli 3 升级到 vue cli 4 方法步骤及升级点总结

官方升级英文文档中文文档相对滞后。

简介:vue cli 4 官方已经更新有一段时间了,现在是4.0.5 版本,看了官方文档大概有二十几点的更新,还是干货满满呀,值得升级一下,下面是升级步骤。

一.首先,在全局安装最新的 Vue CLI:

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

Jetbrains全家桶1年46,售后保障稳定

检查安装的版本

vue -V  # 输出:@vue/cli 4.x.x  说明@vue/cli 4安装成功( vue cli 3的版本会输出 3.x.x )

踩坑记录

npm install -g @vue/cli 执行成功,但是执行 vue -V 输出的还是3.5.6(我以前安装的版本),

于是又重新执行 npm install -g @vue/cli,显示成功,执行 vue -V 输出的还是3.5.6

一脸懵逼 ,然后重启电脑,再执行vue -V 输出 @vue/cli 4.0.5,解决 。

二.在项目根目录下执行

vue upgrade

然后出现
在这里插入图片描述

提示 继续升级这些插件吗? 输入 Y 即可.

三.等步骤二 执行完会发现主要有 2 个文件被修改

1.文件 babel.config.js

主要是 babel 的预设由@vue/app 改成了@vue/cli-plugin-babel/preset

原来的

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

升级后的

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

2.文件 package.json (package-lock.json 也会更改)

主要是依赖升级

原来的

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

升级后的

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

四.然后启动项目

npm run serve

然后报下面的错

在这里插入图片描述

1.第一个错(警告)

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

这行是 vue cli 4 升级了自己的依赖 sass-loader 导致的

它把 sass-loader^7.x.x 的版本升级到了 ^8.0.0,而我项目中使用的是^7.1.0

所以升级一下自己项目的 sass-loader 就好了

执行下面命令即可

npm i sass-loader@8.0.0 -D

2.然后第二个错说没有安装core-js

vue cli 4core-js^2.x.x 的版本升级到了 ^3.x.x

于是安装一下

npm i core-js

然后重启项目还是不行,看了下官方文档和 babel 有关

main.js 代码中

import '@babel/polyfill'

隐藏这个代码

重启好了

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

npm i babel-polyfill

main.js 代码中 改为

import 'babel-polyfill'

五.vue cli 4 主要升级点总结

1."@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"v3 的版本升级到了 v4

2.sass-loaderv7 的版本升级到了 v8

3.core-jsv2 的版本升级到了 v3

4.webpack-chainv4 的版本升级到了 v6

5.css-loaderv1 的版本升级到了 v3

6.url-loaderv1 的版本升级到了 v2

7.file-loaderv3 的版本升级到了 v4

8.copy-webpack-pluginv4 的版本升级到了 v5

9.terser-webpack-pluginv1 的版本升级到了 v2

10.@vue/cli-plugin-pwav3 的版本升级到了 v4

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

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

13.默认目录结构已更改

src/store.js 改为 src/store/index.js

src/router.js 改为 src/router/index.js

14.由于兼容性原因,仍支持 router&routerHistoryMode 选项 preset.json

但是现在建议使用它来 plugins: { '@vue/cli-plugin-router': { historyMode: true } }

获得更好的一致性

15.api.hasPlugin('vue-router')不再受支持,现在 api.hasPlugin('router')

16.lintOnSave 选项的默认值(未指定时)从 true 更改为 default

17.废弃vue-cli-service test:e2e

18.@vue/cli-plugin-e2e-nightwatch Nightwatch.js已从0.9升级到1.x

19.@vue/cli-plugin-unit-mocha 升级到Mocha 6

20.@vue/cli-plugin-unit-jest jestv23 升级到v24

21.@vue/cli-plugin-typescript 更好的ts(x)支持 ,胜过js(x)

参考链接

vue cli 4 官方英文升级文档

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/206566.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 像素和毫米的换算_1500像素等于多少毫米

    像素和毫米的换算_1500像素等于多少毫米屏幕PPI计算:(White^2+Height^2)^0.5/屏幕大小英寸数毫米和像素换算:mm=(px/dpi)*25.4px=(mm*dpi)/25.4英寸=px/dpi1英寸=25.4毫

  • 自动阈值法.m_自动阈值夺获功能

    自动阈值法.m_自动阈值夺获功能%自动阈值法:Otsu法用MATLAB实现Otsu算法:clc;clear;close;I=imread(‘e:\role0\003i.bmp’);subplot(1,2,1),imshow(I);title(‘原始图像’)gridon;%显示网格线axison;%显示坐标系level=graythres

    2022年10月19日
  • Java自定义类加载器「建议收藏」

    Java自定义类加载器「建议收藏」一.Java类加载器的分类引导类加载器(bootstrapclassloader):用于加载Java的核心库,JDK自带,C++代码实现的 扩展类加载器(extensionsclassloader):用于加载Java扩展库,JDK自带 系统类加载器(systemclassloader):用于加载classpath路径下的类,也就是我们编写的应用程序 自定义类加载器(customclassloader):用于加载自定义的类,这个是重点二.Java自定义类加载器的使用场景依赖冲..

  • Android之使用weight属性实现控件的按比例分配空间

    从今天开始,把看书时候的知识点整理成博客,这个比较简单,估计有经验的都用过,weight属性 在做Android布局的时候,经常遇到需要几个控件按比例分配空间的情况比如下图效果在底部设置两个button,占据底部宽度一部分的同时,保持1:3的比例,当然了,这么难看的布局用处不大,仅是用来说明weight的用法布局代码如下:

  • 汇编指令大全

    汇编指令大全80×86指令系统,指令按功能可分为以下七个部分。(1)数据传送指令。(2)算术运算指令。(3)逻辑运算指令。(4)串操作指令。(5)控制转移指令。(6)处理器控制指令。(7

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号