Webpack cl4 配置
2023-12-14 21:53:20
基本配置:
module.exports = defineConfig({
transpileDependencies: false,
lintOnSave: false,
outputDir: process.env.VUE_APP_DIST, // 打包后文件的目录
publicPath: './', // 静态资源路径(默认/,打包后会白屏)
assetsDir: 'static', //outputDir的静态资源(js、css、img、fonts)目录
)}
一.打正式环境包时设置productionSourceMap为false:
-
productionSourceMap: true
- 当设置为
true
时,在生产模式下会生成用于调试的源映射文件。这样,如果在生产环境出现错误,浏览器的开发者工具将能够还原回源代码,方便开发者进行调试。 - 生成的源映射文件可能会增加构建的体积,但对于排查线上问题非常有帮助。
- 当设置为
-
productionSourceMap: false
- 当设置为
false
时,在生产模式下不会生成源映射文件。这样能够减小构建产物的体积,提高生产环境的性能。但在出现问题时,调试时将不再能够直接追踪到源代码。
- 当设置为
二.autoprefixer 样式自动添加浏览器前缀:
? ? ? ? npm install?autoprefixer
const autoprefixer = require('autoprefixer');
// 添加样式浏览器前缀
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [autoprefixer()]
}
}
}
},
?三.打正式包去掉注释/黄色警告/console.log
? ? ? ?安装?uglifyjs-webpack-plugin 插件:
? ? ? ? npm install?uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'; //判断打包生产环境
configureWebpack: config => {
// const plugins = [];
if (isProduction) {
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false, //去除黄色警告
compress: {
drop_console: true,
drop_debugger: false,// 防止利用debugger调试
pure_funcs: ['console.log']//移除console
}
}
})
)
}
}
?四.配置路径别名
// 配置路径别名
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('./src'))
.set('components', resolve('./src/components'))
.set('assets', resolve('./src/assets'))
},
?四.配置多个代理
? ? ? ? 详细介绍:
????????????????项目环境配置 本地/测试/预发/生产_预发布环境部署-CSDN博客
????????? ? ? ? vue项目配置多个代理-CSDN博客
// 代理
devServer: {
proxy: {
"/iot": {
target: process.env.VUE_APP_API_PATH_ONE,
changeOrigin: true,
pathRewrite: {
'^/': '',
}
},
"/V1": {
target: process.env.VUE_APP_API_PATH_TWO,
changeOrigin: true,
pathRewrite: {
'^/': '',
}
},
"/runbayunapi": {
target: process.env.VUE_APP_API_PATH,
changeOrigin: true,
pathRewrite: {
'^/': '',
}
},
},
},
完整代码:
const { defineConfig } = require('@vue/cli-service')
const autoprefixer = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';
const path = require('path');//引入path模块
function resolve(dir) {
return path.join(__dirname, dir)//path.join(__dirname)设置绝对路径
}
module.exports = defineConfig({
transpileDependencies: false,
lintOnSave: false,
outputDir: process.env.VUE_APP_DIST, // 打包后文件的目录
publicPath: './', // 静态资源路径(默认/,打包后会白屏)
assetsDir: 'static', //outputDir的静态资源(js、css、img、fonts)目录
// 打包正式环境去除.map文件
productionSourceMap: false,
// 添加样式浏览器前缀
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [autoprefixer()]
}
}
}
},
configureWebpack: config => {
// const plugins = [];
if (isProduction) {
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false, //去除黄色警告
compress: {
drop_console: true,
drop_debugger: false,// 防止利用debugger调试
pure_funcs: ['console.log']//移除console
}
}
})
)
}
},
// 配置路径别名
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('./src'))
.set('components', resolve('./src/components'))
.set('assets', resolve('./src/assets'))
},
// 代理
devServer: {
proxy: {
"/iot": {
target: process.env.VUE_APP_API_PATH_ONE,
changeOrigin: true,
pathRewrite: {
'^/': '',
}
},
"/V1": {
target: process.env.VUE_APP_API_PATH_TWO,
changeOrigin: true,
pathRewrite: {
'^/': '',
}
},
"/runbayunapi": {
target: process.env.VUE_APP_API_PATH,
changeOrigin: true,
pathRewrite: {
'^/': '',
}
},
},
},
})
文章来源:https://blog.csdn.net/m0_69838795/article/details/134933344
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!