vue-cli 脚手架,重新创建一个新项目,然后复制 @vue/cli-xxx
, vue
相关依赖最新版本到子应用项目 -> 核对babel
, eslint
相关配置的变化 -> 重新安装依赖,处理出现的相各种异常情况 -> 启动项目检查功能是否正常。
webpack5。
configuration.output has an unknown property 'jsonpFunction'
qiankun子应用需要按照官方文档进行webpack配置。
module.exports = {
output: {
library: `${packageName}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${packageName}`,
}
};
以上示例中的 jsonpFunction
配置在 webpack5
中已经被删除,替换为 chunkLoadingGlobal,它们的作用都是提供一个唯一的名称。
module.exports = {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd',
chunkLoadingGlobal: `webpackJsonp_${name}` // 替换配置
}
};
options has an unknown property 'overlay'. | options has an unknown property 'disableHostCheck'
webpack5 中 devServer.overlay
调整为 devServer.client.overlay
。
devServer.disableHostCheck 移除,使用 devServer.allowedHosts 替换。
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.options has an unknown property 'plugins'.
postcss-loader 配置调整,增加一层 postcssOptions。
eslint 相关错误
eslint 依赖包版本,eslint规则发生变化,会出现一些错误提示。按照提示进行修改或者调整规则。
Cannot GET /cooperation/board
在分析原因的过程中,并没有在 webpack5 的配置中找到原因,考虑到使用的是 vue-cli
脚手架,然后脚手架使用的 webpack5 , 所以搜索了 vue-cli
的改动记录。
this PR will restrict request headers of historyApiFallback only work with [ 'text/html', 'application/xhtml+xml']
text/html 等header。所以
historyApiFallback
配置对它无效。而本项目又是history
模式路由,所以带路由 /xxx/xxx 过来请求,就会 404。historyApiFallback 配置。
historyApiFallback: { index: '/xxx/index.html' // xxx为路径,和打包output配置有关 },
Invalid options in vue.config.js: "css.requireModuleExtension" is not allowed
此问题为
vue-cli
升级导致的。css modules 方案,配置了 在
vue.config.js
中配置了css.requireModuleExtension
,而该字段在 V5 版本中已经移除。https://github.com/vuejs/vue-cli/issues/6607 。用以下css-loader
配置来替代。module.exports = { css: { loaderOptions: { css: { modules: { auto: ( => true } } } } }
less版本升级导致除法写法未转换
此问题是 less 版本升级导致。
padding: @m-gap / 2 @m-gap; 转换为了
padding: 16px / 2 16px
,除法未做计算。(@m-gap / 2 或者
(@m-gap ./ 2
才会默认转换。