基本配置：

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 installautoprefixer

const autoprefixer = require('autoprefixer');
// 添加样式浏览器前缀css: {loaderOptions: {postcss: {postcssOptions: {plugins: [autoprefixer()]}}}},

三.打正式包去掉注释/黄色警告/console.log

安装uglifyjs-webpack-plugin 插件：

npm installuglifyjs-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: {'^/': '',}},},},})