vue-cli3项目升级到vue-cli4 的方法总结
作者：zhou_web 发布时间：2024-04-27 15:48:50
这是我对以前配置的基于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
css.loaderOptions全局引入变量和mixin报错
sass-loader v7 之前使用 data：' ', 之后使用prependData：' ',
prependData: '@import "style/_mixin.scss"';替换以前的
data: '@import "style/_mixin.scss"';
升级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配置
再改改升级过程中node提示的错误，升级就完成了~
来源：https://segmentfault.com/a/1190000022065055
0
投稿猜你喜欢
- 准备篇1.配置防火墙，开启80端口、3306端口1 vim /etc/sysconfig/iptables2 -A INPUT -m sta
前言由于数据库的类型为Data 类型，所以插入数据库的时候我先把前端传入的string类型的时间转为Time 再插入。Go 提供了两种插入的- 前言设置mysql最大连接数的方法：首先打开mysql的控制台；然后输入语句【set GLOBAL max_connections=1000
- 在 vue 项目，有时请求返回的数据 中会有含有 \n 的字符串，如果直接渲染的话无法实现换行。 一、通过 css属性
- 想要根据django中的模型和配置生成SQL语句，需要先进行一定的设置：首先需要在你的app文件夹中进入setting.py文件，里面有一个
- 一、简化代码采用更为简短的写法，不仅可以减少输入的字符数，还可以减少文件大小。大部分采用简单写法的代码，执行效率都有轻微提高。1.1&nbs
- 队列是一种只允许在一端进行插入操作，而在另一端进行删除操作的线性表。在Python文档中搜索队列（queue）会发现，Python标准库中包
- 用pycharm和pyqt5，想写一个弹出窗口的程序，如下：class video_record(QWidget): &nbs
- Go语言转换JSON数据真是非常的简单。以EasyUI的Demo为例,将/demo/datagrid/datagrid_data1.json
- 我是通过beego框架，将请求过来的json进行解析，并将值保存在结构体中--------------------1------------
- 前言数据驱动是一种思想，让数据和代码进行分离，比如爬虫时，我们需要分页爬取数据时，我们往往把页数 page 参数化，放在 for 循环 ra
- 1. 关于上传图片失败的问题首先导入jar包 commons-fileupload-1.2.2.jar，ueditor.jar然后修改edi
- 本文实例为大家分享了Python制作简易计算器的具体代码，供大家参考，具体内容如下简易计算器简易计算器功能：实现输入，计算，输出功能；可以计
- 1、绘制简单曲线图思路：通过3个坐标点，绘制曲线import matplotlib.pyplot as plt plt.plot(
- 开始刷leetcode算法题 今天做的是“买卖股票的最佳时机”题目要求 给定一个数组，它的第 i 个元素是一支给定股票第 i 天的价格。设计
- 按照ant design vue官方说明，使用日期选择器需要在入口文件(main.js)全局设置语言：// 默认语言为 en-US，如果你需
- 这是 2020 年第 3 个版本，也是最后一个版本。在 GoLand 2020.3 中，您可以探索 goroutines dumps，运行并
- 目录01 all or any02 dir03 列表(list)推导式04 pprint05 repr06 sh07 Type hints0
- 一、ready函数的实现经常用jQuery类库或其他类库中的ready方法，有时候想想它们到底是怎么实现的，但是看了一下jQuery中的源码
- 1 :普通SQL语句可以用exec执行Select * from tableName exec('select * from tab
