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 相关文章推荐
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 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
BBS(php & mysql)完整版(八)
2006/10/09 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
Javascript学习笔记二 之 变量
2010/12/15 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
flask项目集成swagger的方法
2020/12/09 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
linux面试相关问题
2013/04/28 面试题
工业设计专业推荐信
2013/10/29 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
海飞丝广告词
2014/03/20 职场文书
员工团队活动方案
2014/08/28 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
员工考勤管理制度
2015/08/06 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
SQL Server删除表中的重复数据
2022/05/25 SQL Server