vue3 build的配置及详解

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
export default defineConfig({
  plugins: [vue()], // 使用 Vue 插件
  base: './', // 部署应用时的基本 URL。默认是 '/'，如果部署到子路径，需要修改 [3](@ref)
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 设置路径别名，简化导入 [4,5](@ref)
    },
  },
  server: {
    host: '0.0.0.0', // 指定服务器应该监听哪个 IP 地址
    port: 3000, // 指定开发服务器端口 [4](@ref)
    open: true, // 在服务器启动时自动打开浏览器 [4](@ref)
    proxy: { // 配置自定义代理规则 [4](@ref)
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'dist', // 打包输出目录 [3](@ref)
    assetsDir: 'assets', // 静态资源存放目录 [3](@ref)
    sourcemap: false, // 是否生成 sourcemap 文件，生产环境建议关闭以减小体积 [4](@ref)
    minify: 'terser', // 代码压缩工具，可选 'terser' 或 'esbuild'，默认为 'esbuild' [5](@ref)
    terserOptions: { // 传递给 Terser 的更多 minify 选项 [6](@ref)
      compress: {
        drop_console: true, // 移除 console
        drop_debugger: true, // 移除 debugger
      },
    },
    rollupOptions: { // 自定义底层的 Rollup 打包配置 [4](@ref)
      output: {
        chunkFileNames: 'js/[name]-[hash].js', // 代码分割后的 chunk 文件命名
        entryFileNames: 'js/[name]-[hash].js', // 入口文件命名
        assetFileNames: '[ext]/[name]-[hash].[ext]', // 静态资源文件命名（如字体、图片）[5](@ref)
      },
    },
  },
  css: {
    preprocessorOptions: { // CSS 预处理器相关配置 [4](@ref)
      scss: {
        additionalData: `@import "@/styles/variables.scss";`, // 全局注入 SCSS 变量或 mixin
      },
    },
  },
})

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
 
module.exports = defineConfig({
  transpileDependencies: true, // 如果需要 Babel 显式转译某些依赖，可以在此列出
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/', // 部署应用包时的基本 URL，类似于 Vite 的 base [8](@ref)
  outputDir: 'dist', // 构建文件输出目录 [9](@ref)
  assetsDir: 'static', // 放置生成的静态资源的目录 [9](@ref)
  indexPath: 'index.html', // 指定生成的 index.html 的输出路径 [9](@ref)
  filenameHashing: true, // 静态资源文件名是否包含 hash 以控制缓存 [9](@ref)
  productionSourceMap: false, // 生产环境是否生成 source map，关闭可加速构建 [8](@ref)
  configureWebpack: { // 简单调整 Webpack 配置，会合并到最终配置 [10](@ref)
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
  },
  chainWebpack: (config) => { // 基于 webpack-chain 的链式操作，用于更细粒度的控制 [10](@ref)
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer('terser').tap((args) => {
        args[0].terserOptions.compress.drop_console = true
        return args
      })
    }
  },
  devServer: {
    port: 8080, // 开发服务器端口 [8](@ref)
    open: true, // 启动后是否打开浏览器 [8](@ref)
    proxy: { // 代理配置，解决开发环境跨域 [8](@ref)
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
})

VITE_APP_TITLE=我的应用
VITE_API_BASE_URL=https://api.example.com

VUE_APP_TITLE=我的应用
VUE_APP_API_BASE_URL=https://api.example.com