前言
前端变化日新月异,层出不穷,公司原项目使用vuecil2版本开发,elementUI等一系列库版本太低,也脱离世界很久远了,新版本库需要webpack4等环境,而老版本配置起来bug很多,在使用过程中很多东西都不能实现,所以升级真的是迫在眉睫;
此篇会逐步解析:
- vuecil2如何升级到vuecil3+
- vuecil3+的语法
- 二次升级维护手册
- webpack配置项目的优化…
一、vuecil2如何升级到vuecil3+
卸载旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.> x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
node配置
Vue CLI3+ 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)
全局安装包
npm install -g @vue/cli
# OR
yarn global add @vue/cli
创建一个项目
vue create vue-web-cil4
安装所需选择配置:可参考官方配置
二、vuecil3/vuecil4的配置语法
2.1 目录结构
├── README.md # 说明
|-- dist # 打包后文件夹
├── babel.config.js # babel语法编译
├── package-lock.json
├── public # 静态文件夹,这类资源将会直接被拷贝,而不会经过 webpack 的处理。
│ ├── favicon.ico
│ └── index.html #入口页面
└── src # 源码目录
├── App.vue - 页面
├── assets - 静态目录,这类引用会被 webpack 处理。
│ └── logo.png
├── components 组件
│ └── HelloWorld.vue
└── main.js # 入口文件,加载公共组件
│—— vue.config.js # 配置文件,需自行配置
│—— .gitignore # git忽略上传的文件格式
│—— babel.config.js # babel语法编译
│—— package.json # 项目基本信息
│—— .env # 环境变量和模式,需自行配置
│—— .eslintrc.js # ES-lint校验
2.2 vue.config.js 配置
vuecil3+和vuecil2的最大区别就在于内置了很多配置,没有了build文件夹和config的配置。但是在开发中,避免不了的还是需要个性化的配置,之前有写过ts+vue中的vue.config.js的配置文件,这里系统讲一下 vue.config.js的配置;
- 首先在最外层目录下新建文件vue.config.js
- 具体配置
// vue.config.js
const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩(可选)
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩(可选)
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析,(可选)
const IS_PRODUCTION = ['production', 'prod'].includes(process.env.NODE_ENV);//判断是否是生产环境
/** 正式配置项,以下参数 都是可选**/
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/', // 打包公共路径
indexPath: