VueCLI打包与代理配置详解

// vue.config.js 配置示例
// 官方文档参考：https://cli.vuejs.org/zh/config/
module.exports = {
// 开发服务器配置
devServer: {
host: '0.0.0.0',
port: 8080, // 开发服务器端口
https: false, // 是否启用 HTTPS
open: true, // 自动打开浏览器
proxy: {
'/api': {
target: 'http://172.22.12.28:30083/', // 目标 API 服务器地址
changeOrigin: true,
pathRewrite: {'^/api': '/'} // 路径重写规则
}
}
},
publicPath: './', // 应用公共路径
configureWebpack: (config) => {
if (process.env.NODE_ENV !== 'development' && process.env.NODE_ENV !== 'test') {
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressiOnWebpackPlugin= require('compression-webpack-plugin');
const productiOnGzipExtensions= ['js', 'css'];
config.plugins.push(
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp(`\.(?:${productionGzipExtensions.join('|')})$`),
threshold: 10240,
minRatio: 0.8
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true, // 移除 debugger 语句
drop_console: true, // 移除 console 语句
pure_funcs: ['console.log'] // 移除其他纯函数调用
}
},
sourceMap: false,
parallel: true
})
);
}
}
};


以上配置文件中，我们首先设置了开发服务器的基本配置，如主机地址、端口号、是否启用 HTTPS 和是否自动打开浏览器。接着，通过 `proxy` 属性配置了 API 代理，解决了开发过程中的跨域问题。最后，在生产环境下，我们使用了 `UglifyJsPlugin` 和 `CompressionWebpackPlugin` 插件来压缩 Javascript 和 CSS 文件，提高应用性能。