UniApp 项目中 vue.config.js 配置指南

作者：组件花园

时间：2026-11-01

本文详细介绍在 UniApp 项目根目录创建并配置 vue.config.js 文件的方法。涵盖基础路径、输出目录等默认设置，以及如何通过 chainWebpack 修改构建规则、配置 devServer 代理以及定义全局 Less 变量。保存文件后重新运行项目即可生效，帮助开发者灵活调整构建行为。

文章目录

前言

UniApp 系基于 Vue.js 的跨平台开发框架，支持一套代码构建多平台应用（含小程序、H5、App）。vue.config.js 为 Vue CLI 配置文件，用于设定构建选项。本教程详解 UniApp 项目中 vue.config.js 的配置方法。

步骤一：创建 vue.config.js 文件

在项目根目录新建名为 vue.config.js 的文件。

步骤二：基本配置

编辑 vue.config.js 文件，加入如下基础配置：

module.exports = {
  // 基本路径
  publicPath: '/',
  // 输出目录
  outputDir: 'dist',
  // 静态资源目录
  assetsDir: 'static',
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // ...
};

步骤三：自定义配置

依具体需求添加自定义配置，例如修改 webpack 配置或配置代理。常见示例代码如下：

1.修改 webpack 配置：

module.exports = {
  // ...
  chainWebpack: config => {
    // 添加一个新的 Loader
    config.module
      .rule('foo-loader')
      .test(/\.foo$/)
      .use('foo-loader')
      .loader('foo-loader')
      .end();
  },
};

2.配置代理：

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
};

3.配置全局 less 变量：

module.exports = {
  // ...
  css: {
    loaderOptions: {
      less: {
        globalVars: {
          primaryColor: '#ff0000',
        },
      },
    },
  },
};