搭建网站的六个基本步骤流程,搜索引擎技术,电子商务企业网站建设规划,wordpress centos6前言
基于 Vue2.x 的项目和组件库开发于 2019 年 #xff0c;那时对 Webpack 版本没有概念#xff0c;项目和组件库的版本混乱…有的使用 v3#xff0c;有的使用 v4… 对于现今 2023 年#xff08;或 2024 年#xff09;的整个生态环境是不够用的#xff0c;无法使用较新…前言
基于 Vue2.x 的项目和组件库开发于 2019 年 那时对 Webpack 版本没有概念项目和组件库的版本混乱…有的使用 v3有的使用 v4… 对于现今 2023 年或 2024 年的整个生态环境是不够用的无法使用较新和更优秀的插件。所以升级势在必行 注意 本篇是基于 Vue2.x 组件库 的升级如果想了解 基于 Vue2.x 项目 的升级。 请移步《Vue2.x 项目 Webpack 4 升级 5半自动升级》
实现
升级
package.json 删除冗余依赖
extract-text-webpack-plugin: ^3.0.2,vue-loader: ^13.0.5,
vue-template-compiler: ^2.4.4,
webpack: ^3.6.0,
webpack-dev-server: ^2.9.1,
webpack-glob-entry: ^2.1.1 babel-core: ^6.26.3,
babel-loader: ^7.1.2,
babel-preset-env: ^1.7.0,
babel-preset-react: ^6.24.1,
babel-preset-stage-0: ^6.24.1,
babel-preset-stage-3: ^6.24.1,file-loader: ^1.1.6,安装相关插件
npm i vue2.6.14npm i vue-template-compiler2.6.14 -D
npm i vue-loader15.9.8 -D
npm i file-loader6.2.0 -D
npm i babel-loader8.3.0 -Dnpm i babel/core7.2.2 -D
npm i babel/plugin-transform-runtime7.22.5 -D
npm i babel/preset-env7.3.1 -D
npm i babel/preset-react7 -D
npm i vue/cli-plugin-babel5.0.6 -D
npm i vue/cli-service5.0.6 -Dnpm i axios1.6.0注意千万不要安装这是给vue3和vue2的兼任版本使用
vue/compiler-sfc安装 webpack5
npm install webpack5.89.0 webpack-cli5.1.4 -D安装
npm i mini-css-extract-plugin -D
npm i css-minimizer-webpack-plugin -D
npm i javascript-obfuscator webpack-obfuscator -D
npm i style-loader2 -D修改文件 .npmrc
init.author.name 改为 --init-author-name
init.author.email 改为 --init-author-email修改文件 packages.json 的编译命令
scripts: {build: webpack --config ./webpack.config.js --progress
},修改文件 .babelrc
{ presets:[[babel/preset-env,{ targets: 1% in AU and not dead, shippedProposals: true },],[babel/preset-react, { runtime: automatic }]]
}启动时报错
错误 1 VueLoaderPlugin is not a constructor
解决方案vue-loader 必须在 15且在 webpack.config.js做如下配置
const { VueLoaderPlugin } require(vue-loader)plugins: [// 引入VueLoader插件new VueLoaderPlugin(),
],错误 2 The code generator has deoptimised the styling
解决方案 在项目根目录下查找文件 .babelrc 或 babel.config.js 如果没有就创建一个两者其一即可配置如下
// .babelrc:
{compact: false
}// babel.config.js:
module.exports {compact: false,
}错误 3 Missing class properties transform
解决方案 在文件 .babelrc或babel.config.js 下配置
{ presets:[[babel/preset-env,{ targets: 1% in AU and not dead, shippedProposals: true },],[babel/preset-react, { runtime: automatic }]]
}错误 4 Uncaught ReferenceError: Cannot access l before initialization
解决方案 在文件 .babelrc 或 babel.config.js webpack.config.js 下配置
// .babel 或 babel.config.js
plugins: [babel/plugin-transform-runtime
]// webpack.config.js
module.exports {target: [web, es5],
}错误 5 插件 xlsx 报错
解决方案 如下方式引入
import * as XLSX from xlsx;错误 6 Cant resolve [object Module]
解决方案 字体库报错属于资源配置错误。 文件 webpack.config.js 中配置
{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,type: asset/resource, // 正确// loader: file-loader// 错误
},编译时报错
错误 1 Uncaught ReferenceError: exports is not defined
解决方案第三方参考也可研究 babel-loader。没真正解决因为仅在开发联调环境下报此错误。
组件库文件 index.js 导出组件要判断当前环境是否为 production
// 合并导出
if (process.env.NODE_ENV production) {Object.assign(exports, { MyTestComponents });
}export {MyTestComponents
}错误 2 使用相对路径引用的图片解析后的地址不正确
解决方案 未解决把小图片改为 base64 配置待研究
项目版本是 Webpack4但使用 Webpack5 组件库的解决方案
vue.config.js 加上如下代码第 2 行
module.exports { productionSourceMap: false,// 你的组件库名称transpileDependencies: [my-components-test],
}最后
想要了解更多请查看官网 《从 v4 升级到 v5》
