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 相关文章推荐
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 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
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php获取域名的google收录示例
2014/03/24 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
PHP实现八皇后算法
2019/05/06 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
jquery.validate使用详解
2016/06/02 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python多线程扫描端口示例
2014/01/16 Python
Python的类实例属性访问规则探讨
2015/01/30 Python
python re模块findall()函数实例解析
2018/01/19 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
详解Python with/as使用说明
2018/12/13 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python创建自己的加密货币的示例
2021/03/01 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
如何写一个自定义标签
2012/12/28 面试题
竞职演讲稿范文
2014/01/11 职场文书
承诺书的格式范文
2014/03/28 职场文书
体现团队精神的口号
2014/06/06 职场文书
2015年小学财务工作总结
2015/07/20 职场文书