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 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
关于vue-router的那些事儿
May 23 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 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极大的增强功能和性能
2006/10/09 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
JavaScript 基础问答三
2008/12/03 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
Win10下Python环境搭建与配置教程
2016/11/18 Python
python executemany的使用及注意事项
2017/03/13 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
python async with和async for的使用
2019/06/20 Python
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
七年级生物教学反思
2014/01/30 职场文书
期中考试后的反思
2014/02/08 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
合作投资意向书
2014/04/01 职场文书
入党函调证明材料
2014/12/24 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
2015年教务工作总结
2015/05/23 职场文书
就业推荐表院系意见
2015/06/05 职场文书
煤矿隐患排查制度
2015/08/05 职场文书