首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 build的配置

vue3 build的配置及详解

2025-09-13 09:25:09 作者：leijmdas

这篇文章主要介绍了vue3 build的配置,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3 build的配置

Vue 3 项目的构建配置主要集中在 vite.config.js（如果使用 Vite）或 vue.config.js（如果使用 Vue CLI）。

Vite 是目前 Vue 3 官方推荐的构建工具。

下面是一个核心配置项的概览表格，方便你快速了解：

配置类别	配置项 (Vite)	配置项 (Vue CLI)	主要作用与常见值
基础路径	base	publicPath	部署应用时的基础公共路径。例如：'/my-app/' (子路径部署), './' (相对路径)
输出目录	build.outDir	outputDir	打包文件的输出目录，默认为 'dist'
静态资源目录	build.assetsDir	assetsDir	放置生成的静态资源 (js, css, img, fonts) 的目录，相对于 outputDir。例如 'assets'
源代码映射	build.sourcemap	productionSourceMap	是否为生产环境构建生成 source map 文件，便于调试。false 可加速构建并减小输出体积
代码压缩	build.minify	(通过 configureWebpack)	指定生产环境代码压缩工具。Vite 默认使用 'terser'，也可设置为 'esbuild'（更快）
文件哈希	build.rollupOptions.output	filenameHashing	在输出的文件名中添加哈希值以控制缓存。Vite 通常配置在 rollupOptions.output 中，Vue CLI 默认为 true
路径别名	resolve.alias	chainWebpack 或 configureWebpack	创建模块导入的别名，简化路径。例如 '@': path.resolve(__dirname, 'src')
开发服务器	server	devServer	配置开发服务器行为，如端口、代理等
CSS 相关	css	css	配置 CSS 预处理器、模块化、提取行为等
环境变量	.env.[mode] 文件	.env.[mode] 文件	根据不同环境（开发、生产、测试）设置变量。Vite 中通过 import.meta.env 访问

Vite 项目详细配置 (vite.config.js)

Vite 是 Vue 3 官方推荐的构建工具，提供更快的开发服务器启动和热更新。

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
      },
    },
  },
})

Vue CLI 项目详细配置 (vue.config.js)

Vue CLI 也是一个常用的工具，可以简化 Vue 项目的配置和打包过程。

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': '',
        },
      },
    },
  },
})

环境变量配置

Vue 3 项目通常使用环境变量来管理不同环境（开发、测试、生产）的配置。

创建环境文件：在项目根目录创建 .env.development (开发环境)、.env.production (生产环境)、.env.test (测试环境) 等文件。

定义变量：在环境文件中，以 VITE_ 开头定义变量（Vite 项目）或 VUE_APP_ 开头（Vue CLI 项目）。

Vite 项目环境文件示例 (.env.production)：

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

Vue CLI 项目环境文件示例：

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

访问变量：

在 Vite 项目中，通过 import.meta.env.VITE_变量名 访问。
在 Vue CLI 项目中，通过 process.env.VUE_APP_变量名 访问。

常用构建命令

在 package.json 的 scripts 中通常会定义这些命令：

开发环境：npm run dev (Vite) 或 npm run serve (Vue CLI) - 启动开发服务器。
生产构建：npm run build - 构建生产环境用的包，输出到 dist 目录。
预览构建结果：npm run preview (Vite) - 本地预览构建后的生产包。

可选：配置分析和优化

打包分析：可以使用 rollup-plugin-visualizer 等插件分析构建产物，优化体积。
代码分割：通过动态导入 (import()) 和配置 build.rollupOptions.output.manualChunks (Vite) 或 configureWebpack.optimization.splitChunks (Vue CLI) 来优化代码分割和懒加载。
兼容旧浏览器：使用 @vitejs/plugin-legacy (Vite) 或相应的 Babel 配置 (Vue CLI) 为生产构建提供传统浏览器兼容性。

总结

希望这些信息能帮助你配置和优化你的 Vue 3 项目构建！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

vue3 build的配置及详解