无成本搭建属于自己的网站,php 视频播放网站开发,电子商务网站建设的技术综述,中文企业网站模板html1.自动升级
先全局安装升级插件
npm i npm-check npm-check-updates -g检查依赖
npm-check更新检查后的依赖并展示版本号#xff0c;此时 package.json还没有更新
npm-check-updates升级 package.json#xff0c;下图显示更新版本#xff0c;此时 package.json文件已变更…1.自动升级
先全局安装升级插件
npm i npm-check npm-check-updates -g检查依赖
npm-check更新检查后的依赖并展示版本号此时 package.json还没有更新
npm-check-updates升级 package.json下图显示更新版本此时 package.json文件已变更。但我们是更新webpackvue还是使用v2先手动改回原来的版本号。
ncu -upackage.json中删除无用插件
cache-loader: 4.1.0,清理缓存和依赖非常有必要避免冗余插件且会报奇怪的错误。或直接删除 node_modules 文件夹
npm cache clean --force
npm install --legacy-peer-deps删除原有 package-lock.json安装依赖
npm install2.解决系统启动时报错 Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin(‘preload’).use() first 解决vue.config.js 中删除如下代码暂无配置需要
config.plugin(preload).tap(() [{rel: preload,fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],include: initial}
])config.plugin(ScriptExtHtmlWebpackPlugin).after(html).use(script-ext-html-webpack-plugin, [{// runtime must same as runtimeChunk name. default is runtimeinline: /runtime\..*\.js$/}]).end()webpack 5 used to include polyfills for node.js core modules by default. 解决安装 npm install path-browserifyvue.config.js 中配置
module.exports {,configureWebpack: {resolve: {fallback: { path: require.resolve(path-browserify) },}}
}Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. 解决再嵌套一层overlay 放在 client 中
// 错误
module.exports {devServer: {overlay: {warnings: false,errors: true},}
}
// 正确 要套在 client 属性下
module.exports {devServer: {client: {// https://webpack.docschina.org/configuration/dev-server/#overlayoverlay:false,//禁止当出现编译错误或警告时在浏览器中显示全屏覆盖}}
}export ‘default’ (imported as ‘pathToRegexp’) was not found in ‘path-to-regexp’ 解决从 v2.4.0 升级到 v6.2.1要做如下调整。文件src\components\admin\Breadcrumb\index.vue
报错
import pathToRegexp from path-to-regexp
正确
import * as pathToRegexp from path-to-regexpPostCSS Loader has been initialized using an options object that does not match the API schema 解决再嵌套一层plugins 放在 postcssOptions
//报错适合 webpack 4-
css: {loaderOptions: {postcss: {plugins: [require(postcss-pxtorem)({ // 把px单位换算成rem单位rootValue: 16, // 16px 1remunitPrecision: 5,propList: [*],replace: true,mediaQuery: false,minPixelValue: 0})]}}
}
// 正确需要再嵌套一层 postcssOptions
css: {loaderOptions: {postcss: {postcssOptions: {plugins: [require(postcss-pxtorem)({ // 把px单位换算成rem单位rootValue: 16, // 16px 1remunitPrecision: 5,propList: [*],replace: true,mediaQuery: false,minPixelValue: 0})]}}}
}3.解决系统启动后报错 CSS 中 background: url(…) 图片路径错误 解决貌似无法使用相对路径要使用绝对路径。如果图片在 public/images
// 报错暂不理解为啥 webpack5 不可行或是有其它配置未更新
background: url(/images/tools/bg-selected.png);
// 正确
background: url(../../../../public/images/tools/bg-selected.png);
// 正确(推荐)或把图片放 src/assets/images 下。避免多层级嵌套
background: url(/assets/images/tools/bg-selected.png);后台管理系统 sass 变量 export 失败 解决文件 src\layout\components\Sidebar\index.vue 。参考 VueCLI CSS ModulesVite 也有类似说明参考 Vite CSS Modules
// 错误导出对象为空
import variables from /styles/variables.scss
// 正确新增前缀.module被认为是一个CSS模块文件导入时会返回一个相应的模块对象
import variables from /styles/variables.module.scss
