背景说明:原公司项目采用的是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({
// ...
})
开始整改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)
最后到目前写文章的时间位置
下面是各个依赖的安装版本
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
参考文章
网友评论