记录Vue3.x改造旧项目的爬坑之路

背景说明：原公司项目采用的是webpack+vuex+vueRouter+elementUI构建的一个比较正常的项目
下面分别记录在整改的过程中遇到的一些问题
vue3.x安装

首先开始我们的准备工作，搭建vue3的工作环境

1> node需要升级到最新版

直接去官网下载最新的node安装包

2> 更新npm

npm install -g npm 或者 cnpm install -g npm（淘宝镜像更新）

3> 接下来是webpack更新

必须安装webpack4的三个基础包：webpack，webpack-cli，webpack-dev-server

npm i webpack webpack-cli webpack-dev-server  --save-dev 
或者使用yarn更新 yarn add webpack webpack-cli webpack-dev-server --save -dev

注意：webpack4不再支持CommonsChunkPlugin，改用optimization

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};
W

接下来进入我们的正题

开始整改main.js

由于涉及到了elementUI所以需要更新vue3.x对应的element-plus
element-plus安装
包含了全部引入和按需引入的详细步骤
在引入的过程中如果浏览器出现了报错，不要紧张，这可能是main.js中引入的其他依赖中没有整改导致的
比如我就遇到了一个有趣的错误
报错信息为：path is not defined
当时找了一上午，最后才知道是最新的webpack不支持直接引入
需要使用Polyfill（path-browserfy）
在webpack的config中配置

plugins:[
      resolve:{
         'path': require.resolve('path-browserify')
     }
]

path-browserify这个需要安装一下

开始整改vue-router

npm install vue-router@4

// 以前是
// import Router from 'vue-router'
import { createRouter } from 'vue-router'

const router = createRouter({
  // ...
})

vue-router4.x安装指南

开始整改vuex

npm install vuex@next --save

import { createApp } from 'vue'
import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({ /* your root component */ })

// Install the store instance as a plugin
app.use(store)

vuex4.x安装指南

最后到目前写文章的时间位置
下面是各个依赖的安装版本

vue ^3.0.6
vue-loader ^16.0.0-beta.8
vue-router ^4.0.0-beta.13
vuex ^4.0.0
webpack ^5.24.2
webpack-cli 3.3.12
webpack-devserver ^3.11.2
element-plus ^1.0.2-beta.32
vue-i18n ^9.0.0-rc9

参考文章