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 相关文章推荐
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
js评分组件使用详解
Jun 06 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
详解React中setState回调函数
Jun 14 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 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/12/06 PHP
php缓存技术详细总结
2013/08/07 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
JavaScript 原型继承
2011/12/26 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
django之常用命令详解
2016/06/30 Python
python书籍信息爬虫实例
2018/03/19 Python
python实现简易动态时钟
2018/11/19 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python for循环与getitem的关系详解
2020/01/02 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
数控专业推荐信范文
2013/12/02 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
高中班主任评语大全
2014/04/25 职场文书
小班幼儿评语大全
2014/04/30 职场文书
实习推荐信
2014/05/10 职场文书
白莲教口号
2014/06/18 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
学校食品安全责任书
2015/01/29 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
Javascript webpack动态import
2022/04/19 Javascript