最近开发的项目遇到一个问题,项目是基于webpack4开发的,客户使用的是webpack5导致项目无法正常运行,需要修改一下让其在webpack5下可以正常运行,这里记录一下配置,方便后续回查
项目依赖webpack4
{
"name": "zhihuiludeng",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"build-qiniu": "vue-cli-service build && node qiniu.js"
},
"dependencies": {
"@glidejs/glide": "^3.6.0",
"@meruem117/vue-seamless-scroll": "^0.0.19",
"@vue/composition-api": "^1.7.2",
"axios": "^1.7.9",
"core-js": "3.6.5",
"dayjs": "^1.11.2",
"echarts": "^5.4.1",
"echarts-gl": "2.0.8",
"echarts-liquidfill": "^3.1.0",
"element-ui": "^2.15.14",
"fs": "0.0.1-security",
"gsap": "^3.12.2",
"highcharts": "^10.1.0",
"particles.js": "^2.0.0",
"postcss-pxtorem": "^5.1.1",
"qiniu": "^7.8.0",
"qs": "^6.10.1",
"sass": "^1.67.0",
"three": "^0.173.0",
"vue": "2.6.12",
"vue-carousel-3d": "^1.0.1",
"vue-router": "^3.0.1",
"vue-seamless-scroll": "^1.1.23",
"wow.js": "^1.2.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"crypto-js": "^4.1.1",
"element-theme-chalk": "^2.15.8",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"sass-loader": "^8.0.2",
"vue-template-compiler": "2.6.12",
"wowjs": "^1.1.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
项目依赖webpack5
{
"name": "zhihuiludeng",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"build-qiniu": "vue-cli-service build && node qiniu.js"
},
"dependencies": {
"@glidejs/glide": "^3.6.0",
"@meruem117/vue-seamless-scroll": "^0.0.19",
"@vue/composition-api": "^1.7.2",
"axios": "^1.7.9",
"core-js": "^3.8.3",
"dayjs": "^1.11.2",
"echarts": "^5.4.1",
"echarts-gl": "2.0.8",
"echarts-liquidfill": "^3.1.0",
"element-ui": "^2.15.14",
"gsap": "^3.12.2",
"highcharts": "^10.1.0",
"particles.js": "^2.0.0",
"postcss-pxtorem": "^5.1.1",
"qiniu": "^7.8.0",
"qs": "^6.10.1",
"sass": "^1.67.0",
"three": "^0.173.0",
"vue": "2.6.14",
"vue-carousel-3d": "^1.0.1",
"vue-router": "^3.6.5",
"vue-seamless-scroll": "^1.1.23",
"wow.js": "^1.2.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"babel-eslint": "^10.1.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"crypto-js": "^4.1.1",
"element-theme-chalk": "^2.15.8",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-standard": "^5.0.0",
"eslint-plugin-vue": "^8.7.1",
"path-browserify": "^1.0.1",
"process": "^0.11.10",
"querystring-es3": "^0.2.1",
"sass-loader": "^12.6.0",
"stream-browserify": "^3.0.0",
"url": "^0.11.0",
"util": "^0.12.5",
"vue-template-compiler": "2.6.14",
"wowjs": "^1.1.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
vue.config.js webpack4配置
'use strict'
const webpack = require('webpack')
var qiniuPrefix = require("./qiniu-upload-prefiex");
module.exports = {
// 七牛cdn配置
publicPath: process.env.NODE_ENV === 'production' ? (qiniuPrefix.accessKey ? qiniuPrefix.prefixhost + qiniuPrefix.prefix : '') : '',
// publicPath: '',
productionSourceMap: false,
lintOnSave: false,
css: {
loaderOptions: {
sass: {
implementation: require('sass'), // 使用 dart-sass
sassOptions: {
// 不再需要 fiber 选项
}
}
}
},
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
Popper: ['popper.js', 'default']
})
]
}
}
vue.config.js webpack5配置
'use strict'
const webpack = require('webpack')
const { defineConfig } = require('@vue/cli-service')
var qiniuPrefix = require("./qiniu-upload-prefiex");
module.exports = defineConfig({
// 七牛cdn配置
publicPath: process.env.NODE_ENV === 'production' ? (qiniuPrefix.accessKey ? qiniuPrefix.prefixhost + qiniuPrefix.prefix : '') : '',
productionSourceMap: false,
lintOnSave: false,
css: {
loaderOptions: {
sass: {
implementation: require('sass'),
sassOptions: {
outputStyle: 'expanded'
}
}
}
},
// 修复 WebSocket 错误的关键配置
devServer: {
port: 8081, // 更换端口避免冲突
host: '0.0.0.0',
hot: true,
client: {
webSocketTransport: 'ws',
overlay: {
warnings: false,
errors: true
}
},
webSocketServer: {
type: 'ws',
options: {
// 添加错误处理
verifyClient: (info) => {
return true;
}
}
}
},
configureWebpack: {
resolve: {
fallback: {
"fs": false,
"path": require.resolve("path-browserify"),
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer")
}
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
Popper: ['@popperjs/core', 'default'],
Buffer: ['buffer', 'Buffer'],
process: 'process/browser'
})
]
},
chainWebpack: config => {
// 优化构建性能
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
})
config.module
.rule('mjs')
.test(/\.mjs$/)
.include.add(/node_modules/)
.end()
.type('javascript/auto')
}
})
