vue-cli3项目升级到vue-cli4 的方法总结


Posted in Javascript onMarch 19, 2020

这是我对以前配置的基于vue-cli3搭建的前端H5模板的升级,主要把vue-cli3项目升级为vue-cli4,并删除一些过时插件。插件版本升级到当前(2020-03-19)最高版本(升级了很多webpack插件版本),升级完后新加多域名代理配置,官方升级文档点我点我

按着官方的文档升级来也会碰到很多坑,?,配置完可直接使用。

主要功能包括

  • webpack 打包扩展
  • css:sass支持、normalize.css、_mixin.scss、_variables.scss
  • vw、rem布局
  • 多域名代理跨域设置
  • eslint + standard设置
  • 常用库cdn引入
  • 路由设计、登录拦截
  • axios、api 设计
  • vuex状态管理

项目地址: vue-cli4-H5

demo打包地址: https://zhouyupeng.github.io/2020-03-19/dist/#/

以下是升级步骤和总结

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

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

检查安装后的cli版本

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

我安装后查看一直是3.X版本就先卸载了vue/cli载新装

二.在项目根目录下执行

vue upgrade

按提示升级即可报错及解决方法

WARN "css.modules" option in vue.config.js is deprecated now, please use "css.requireModuleExtension" instead.

css-loader升级v3后使用css.requireModuleExtension代替css.modules

vue-cli3项目升级到vue-cli4 的方法总结

css.loaderOptions全局引入变量和mixin报错

sass-loader v7 之前使用 data:' ', 之后使用prependData:' ',
prependData: '@import "style/_mixin.scss"';替换以前的
data: '@import "style/_mixin.scss"';

vue-cli3项目升级到vue-cli4 的方法总结

升级ESLint后因为用的是standard不是Prettier报的错,
升级后要另外安装四个插件

npm install eslint-plugin-import --save-dev
npm install eslint-plugin-node --save-dev
npm install eslint-plugin-promise --save-dev
npm install eslint-plugin-standard --save-dev

删除这个uglifyjs-webpack-plugin被官方已淘汰的插件,改用webpack4.x自带的去console配置

vue-cli3项目升级到vue-cli4 的方法总结

再改改升级过程中node提示的错误,升级就完成了~

到此这篇关于vue-cli3项目升级到vue-cli4 的方法总结的文章就介绍到这了,更多相关vue-cli3升级到vue-cli4 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
jquery选择器使用详解
Apr 08 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
ES6字符串的扩展实例
Dec 21 Javascript
js实现经典贪吃蛇小游戏
Mar 19 #Javascript
javascrpt密码强度校验函数详解
Mar 18 #Javascript
Node.js Domain 模块实例详解
Mar 18 #Javascript
js判断密码强度的方法
Mar 18 #Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 #Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 #Javascript
JavaScript正则表达式验证登录实例
Mar 18 #Javascript
You might like
用php+mysql一个名片库程序
2006/10/09 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
Javascript Global对象
2009/08/13 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
js实现简单锁屏功能实例
2015/05/27 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
js实现移动端轮播图效果
2020/12/09 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
Django实现的自定义访问日志模块示例
2017/06/23 Python
python实现点对点聊天程序
2018/07/28 Python
Python 中的lambda函数介绍
2018/10/10 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Django ORM filter() 的运用详解
2020/05/14 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
电气技术员岗位职责
2013/11/19 职场文书
好的演讲稿开场白
2013/12/30 职场文书
换届选举主持词
2015/07/03 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python