vux 配置的核心就三件事：把 vux-loader 接进构建链路、用按需引入控制打包体积、再处理 rem 适配和主题覆盖，这三步走通，一个基于 Vue 2 的移动端 H5 项目基本就能稳定跑起来。
vux 是 Vue 2 时代的移动端组件库，虽然新项目已经很少选它，但大量存量项目仍在维护，接手这类项目时，构建配置往往是最先卡住人的地方报错信息指向 vux-loader，翻文档又发现官方示例停留在老版本脚手架，下面按实际改造顺序拆开讲。
vux配置的基础骨架：vux-loader 怎么接
先锁定版本组合
vux-loader 依赖 webpack 4 的 API，这是所有配置的前提。
npm i vux vux-loader --save npm i less less-loader@5 --save-dev
less-loader 版本要留意，5.x 以下对 vux 内部的 less 语法兼容更稳，版本过高会抛 options has an unknown property 'javascriptEnabled'，在 loader 的 options 里补上 javascriptEnabled: true 通常能压下去。
Vue CLI 2 项目的接法
在 build/webpack.base.conf.js 里包一层：
const vuxLoader = require('vux-loader')
const webpackConfig = { / 原有配置保持不变 / }
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
注意 merge 的第一个参数是原本要导出的配置对象，不要直接导出一个新对象，否则脚手架自带的环境变量注入会失效。
Vue CLI 3/4 项目的接法
改用 vue.config.js：
const vuxLoader = require('vux-loader')
module.exports = {
configureWebpack: config => {
vuxLoader.merge(config, { plugins: ['vux-ui'] })
}
}
入口文件里按插件方式注册：
import { AlertPlugin, ToastPlugin } from 'vux'
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)
注册完页面样式错乱,多数情况是样式没被 loader 链处理，回头确认 less-loader 是否真的装上、
node_modules/vux 有没有被 exclude 规则误伤。
vux配置按需引入到底怎么设置
整包引入会让构建产物明显膨胀,按需引入是必做项。
用 vux-ui 的 components 白名单
vux-ui 插件支持 components 字段，只把用到的组件打进包里：
vuxLoader.merge(config, {
plugins: [
{
name: 'vux-ui',
options: {
components: ['alert', 'toast', 'x-input', 'x-button']
}
}
]
})
配好之后业务代码照常写 import { Alert } from 'vux'，构建时只有白名单里的组件会被保留。
手动按需引入的写法
不想动构建配置,也可以直接引具体路径：
import Alert from 'vux/src/components/alert/index.vue'
代价是要自己管样式依赖,组件内部引用的 less 变量可能拿不到，容易出现样式缺失。
- 组件数量少于 10 个，白名单方式最省事
- 组件分散在多个页面,统一写进
components数组，避免漏配导致运行时找不到组件 - 既想按需又不想改 webpack，用具体路径引入，但记得同步引样式
vux-loader与postcss-pxtorem适配方案哪个更合适
移动端绕不开 rem 缩放，这也是配置里最容易配错的一环，vux 默认设计稿宽度 375，vux-ui 插件自带 designWidth 选项。
| 对比项 | @vux/px2rem-loader | postcss-pxtorem |
|---|---|---|
| 接入位置 | webpack 的 loader 链 | PostCSS 插件 |
| 转换范围 | 主要面向 vux 组件源码 | 全项目样式文件 |
| 启动配置 | 需与 vux-ui 的 designWidth 对齐 | 独立配置 rootValue |
| 维护状态 | 跟随 vux-loader，更新缓慢 | PostCSS 生态持续维护 |
| 适用场景 | 只想缩放 vux 组件 | 整站样式统一缩放 |
实操路径
以 postcss-pxtorem 为例：
npm i postcss-pxtorem amfe-flexible --save
入口引入 import 'amfe-flexible'，再在 postcss.config.js 里配置：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: [''],
selectorBlackList: ['.no-rem']
}
}
}
rootValue 设 37.5，配合 vux-ui 的 designWidth: 375，缩放基准才一致，两者不一致，组件在 iPhone 上的左右间距会整体偏移，设计师给的是 750 宽的稿子，rootValue 改 75，designWidth 也同步改 750，别只改一边。
主题定制与多语言配置
less-theme 覆盖默认变量
新建 src/styles/theme.less，写入要覆盖的变量：
@theme-color: #1989fa; @button-primary-bg-color: #1989fa;
再把文件接进插件：
{
name: 'less-theme',
path: 'src/styles/theme.less'
}
变量名以 vux 的 src/styles/variable.less 为准，写错名字不会报错，样式也不会变，排查时先核对拼写。
i18n 插件
{
name: 'i18n',
vux: true,
locale: 'zh-CN'
}
入口同步引入 vux/src/locales/zh-CN，否则组件内置文案会缺。
移动端H5项目vux配置的完整流程
按顺序执行,基本能避开大部分坑：
- 确认 Vue 2.x + webpack 4.x，锁死 less-loader 版本
- 安装 vux、vux-loader、less、less-loader
- 在 webpack 或 vue.config.js 里用
vuxLoader.merge注入 vux-ui - 配置 components 白名单控制体积
- 配 rem 方案，rootValue 与 designWidth 对齐
- 加 less-theme 覆盖品牌色
- 加 duplicate-style 插件消除重复样式，写法就一行：
{ name: 'duplicate-style' }
- 跑一次生产构建,检查 chunk 体积和样式产物是否正常
常见报错与排查
- Cannot find module ‘vux-loader’：它被装进了 devDependencies，生产构建时被裁剪，挪到 dependencies，或确认 CI 环境执行了完整安装。
- 构建报错指向 webpack 内部 API：vux-loader 用了 webpack 4 的方法，要么降级构建工具，要么放弃 vux-loader，改成手动按需引入加 PostCSS 处理样式。
- 真机间距异常：rootValue 和 designWidth 不匹配，或者页面里 px 与 rem 混用。
据 CNNIC 公开数据，国内网民通过手机接入互联网的比例长期处于高位，移动端适配的容错空间很小，基准值配错在真机上会立刻暴露。
vux 配置的难点从来不在写法，而在版本对齐：Vue 2、webpack 4、less-loader 三者锁死，rem 基准与 designWidth 对齐，剩下都是插件堆叠，这几处对齐了，老项目照样能稳定构建。
vux配置常见问题解答
vux配置在2026年还有必要学吗
行业共识认为,vux 属于 Vue 2 时代的历史方案，仓库更新节奏已明显放缓，它在存量维护项目中依然大量存在，接手时必须看得懂 vux-loader 的插件配置，新项目建议直接选 Vant、NutUI 这类持续维护的库，Vue 3 生态下 vux 基本不具备可用性。
vux配置外包大概要花多少钱
多数情况下按人天计价,改造一个中等规模的 Vue 2 项目，从接手到构建跑通、样式对齐，通常需要若干人天，不同地域报价差异明显，北京、上海、深圳的团队单价普遍高于成都、武汉等城市，纯配置工作的报价并不高，真正耗时的是老项目里那些说不清的兼容性问题。
vux配置和Vant配置能不能共存
技术上可行,但两者的样式变量体系和 rem 方案容易互相覆盖，业内专家指出，混用组件库会让样式覆盖关系变得难以追踪，后期维护成本远高于一次性迁移，真要过渡，建议按路由拆分，同一个页面下只保留一套组件库。