VUX 的 vux2 模板与 Vue 官方 webpack 模板有什么区别：模板选型、预置配置与 vux-loader 原理

• UI组件
• 前端

vux2是 VUX 官方维护的 Vue 2.x 工程模板，它 fork 自 Vue 官方webpack模板并针对 VUX 组件库做了完整的工程化预配置，且与官方模板基本保持同步。本文围绕这一 FAQ 主题，说明模板间的差异、vux2 模板内置的关键配置（reset 样式、vux-loader、less/babel/yaml 支持、viewport、Fastclick、vue-router 等），并结合当前仓库中的文档与源码（如 手动配置使用、vux-loader 文档、vue-cli-3-example）深入解析其底层原理，读完即可在“直接用 vux2 模板”与“手工配置 webpack”两条路径中做出选择并落地实践。

结论先行：直接用 vux2 模板

官方 FAQ 的回答非常明确：

vux2模板 fork 自webpack模板并进行了配置，和webpack模板基本同步，因此建议直接使用 vux2 模板。

也就是说，两者不是同一代际的差异，而是“同源 + 预置”的关系：vux2 在官方 webpack 模板基础上叠加了 VUX 组件库所需的全部构建配置，并且持续跟随官方模板更新。因此对新项目而言，直接初始化 vux2 模板即可同时获得官方模板的工程能力与 VUX 的开箱即用体验，不必自己从零拼接 webpack 配置。

vux2 模板的快速上手

快速入门文档给出了 vux2 模板的标准初始化流程（默认即 webpack2 模板）：

npm install vue-cli -g # 如果还没安装 vue init airyland/vux2 projectPath cd projectPath npm install --registry=https://registry.npm.taobao.org # 或者 cnpm install 或者 yarn npm run dev # 或者 yarn dev

若使用 yarn，建议配置淘宝源加速依赖安装：

yarn config set registry https://registry.npm.taobao.org yarn

需要强调的是，VUX 官方对 2.x 版本的态度是：推荐webpack + vue-loader方式开发，不建议用<script>引入 UMD 文件，因为后者会带来一系列开发、维护、效率与部署问题——这正是 vux2 模板存在的意义：把官方推荐方式固化成模板，省去每次手工配置。

vux2 模板到底预置了什么：逐一拆解

手动配置使用文档明确列出了airyland/vux2模板主要处理的事项。这些正是它与裸 webpack 模板的差异所在，也是“为什么要直接用它”的技术依据。仓库中的 vue-cli-3-example 则是这些配置在 Vue CLI 3 下的等价实现，可对照阅读。

1. 引入 reset.less 基础样式

VUX 默认样式不包含 CSS reset，且部分用户自带 reset，因此需要在App.vue中手动引入：

<style lang="less"> @import '~vux/src/styles/reset.less'; </style>

模板会帮你放好这行引用，对应仓库中的 src/styles/reset.less 文件。

2. 通过 vux-loader 配置 vue-loader

vux2 必须配合vux-loader使用，这是 VUX 2.x 工程化的关键。在 安装使用(webpack) 文档中给出了 webpack 1/2 时代的标准写法：

const vuxLoader = require('vux-loader') const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })

而在 Vue CLI 3 项目中，则通过configureWebpack钩子调用@vux/loader的merge方法（见 packages/vue-cli-3-example/vue.config.js）：

module.exports = { configureWebpack: config => { require('@vux/loader').merge(config, { plugins: ['vux-ui', { name: 'less-theme', path: 'src/theme.less' }] }) } }

3. 配置 babel-loader 编译 VUX 的 JS 源码

VUX 的源码是 ES 模块，需要 babel 正确转译，这一项同样通过 vux-loader 的vux-ui插件完成。注意文档中的明确警告：请将babel-loader的配置写到.babelrc里而不是使用options，否则可能会出错。

4. 安装 less-loader 与 yaml-loader

VUX 样式基于 less 编写，语言文件使用 yml 格式，因此模板需要配套：

npm install less less-loader --save-dev npm install yaml-loader --save-dev

5. 添加 viewport meta

移动端适配必备：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

6. 添加 Fastclick 移除点击延迟

const FastClick = require('fastclick') FastClick.attach(document.body)

7. 添加 vue-router

import VueRouter from 'vue-router' Vue.use(VueRouter)

如果项目不需要前端路由，这一步可以忽略。

8. 添加 duplicate-style 插件去除重复 CSS

VUX 直接引用 less，最终构建的 CSS 可能存在冗余，模板通过 vux-loader 插件在构建后清理：

plugins: [{ name: 'duplicate-style' }]

9. 补齐 .vue extension 解析

如果使用webpack-simple模板或 webpack 配置缺少.vue扩展名解析，需要配置：

resolve: { extensions: ['.js', '.vue', '.json'] }

从这份清单可以看到，vux2 模板的本质就是把以上“为 VUX 而做的约定”全部固化，让你省去查文档、踩坑的时间——这也正是 FAQ 建议直接使用 vux2 模板的工程理由。

底层原理：vux-loader 如何与 vue-loader 配合

vux2 模板的差异化配置全部经由vux-loader落地，理解 vux-loader 文档 能帮你真正理解模板做了什么，以及为什么某些写法（如 import 空格）会影响打包结果。

vue-loader并不会接收上一个 loader 的 source 继续处理，而是直接生成一段 loader string，大致如下：

/* styles */ require("!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!vue-loader/lib/selector?type=styles&index=0!./index.vue") /* script */ __vue_exports__ = require("!!babel-loader!vue-loader/lib/selector?type=script&index=0!./index.vue") /* template */ var __vue_template__ = require("!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!vue-loader/lib/selector?type=template&index=0!./index.vue")

直接配置vue-loader的自定义 loader string 会破坏原有 loader 参数，导致 Live reload 失效。因此vux-loader采用前置 loader 的写法：vux-loader!vue-loader，由 vux-loader 对 vue-loader 生成的代码做二次处理，分割 loader string 并插入 vux 的 template-loader、style-loader、script-loader，处理后的结果类似：

/* styles */ require("!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!./../../../../vux-loader/src/style-loader.js!vue-loader/lib/selector?type=styles&index=0!./index.vue") /* script */ __vue_exports__ = require("!!babel-loader!vue-loader/lib/selector?type=script&index=0!./../../../../vux-loader/src/script-loader.js!./index.vue") /* template */ var __vue_template__ = require("!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!./../../../../vux-loader/src/template-loader.js!vue-loader/lib/selector?type=template&index=0!./index.vue")

而js-parser则只是在babel-loader前追加js-loader。所有 loader 与插件的设置都在vux-loader的merge方法内完成——这正是 vux2 模板配置代码的核心所在。文档同时注明：该写法只兼容 webpack@1.x，为兼容 webpack@2.x 使用vux-loader!vue-loader形式；目前支持vue-loader@>9.x。另外，更新配置后需要重启npm run dev才能生效。

vux-ui 插件的三项处理

配合 VUX 使用时，vux-ui插件默认启用并完成三件事：

• 配置 babel 编译 VUX 的 JS 源码；
• 修改 vue-loader 为vux-loader!vue-loader；
• 将import组件调用解析为单组件引入。

由此组件引入从 0.x 时代的深路径写法简化为：

// 0.x import Group from 'vux/src/components/group' import Cell from 'vux/src/components/cell' // 2.x import { Group, Cell } from 'vux'

同理，插件调用也可以统一写成import { AlertPlugin, ToastPlugin } from 'vux'，由js-parser解析为单文件引入后再进入 babel。

为什么 FAQ 建议配合 eslint 与正确写法

vux-loader基于代码文本替换实现按需引入，因此对写法比较敏感。打包体积过大 FAQ 指出几类常见坑：

• vux-loader@1.0.61以下版本，import{Group, Cell} from 'vux'这种import与{之间无空格的写法不会被解析为按需引入，纠正或升级 vux-loader 可解决；
• 未正确配置 vux-loader（对照文档或直接用 vux2 模板即可）；
• 不标准的写法导致文本替换解析失败；
• vux-loader@1.0.67以下版本，单行注释里的 import 语句可能引发问题，请升级到最新。

这也是 FAQ 建议使用 vux2 模板的另一个侧面理由：模板自带的配置与 eslint 规范能从一开始就规避这些体积问题。

模板之外：用 NODE_ENV 区分环境

如果你使用了vux2模板或官方webpack模板，开发文档说明可以直接通过process.env.NODE_ENV区分环境，例如统计代码仅在生产环境生效、不同环境使用不同 API 地址：

if (process.env.NODE_ENV === 'production') { // 干一些线上才要做的事情 } if (process.env.NODE_ENV === 'development') { // 干一些测试时不可告人的事情 }

若是自定义环境，可参考 webpack 的DefinePlugin进行注入。这进一步印证了 vux2 模板“与官方 webpack 模板基本同步”的定位——它继承的工程能力同样开箱可用。

小结：选 vux2 还是手配 webpack

综合来看，vux2与官方webpack模板的关系可以总结为：

• 同源：vux2 fork 自 webpack 模板，且与官方基本保持同步，官方模板具备的构建、热更新、环境区分等能力它都有；
• 预置：vux2 额外固化了 reset 样式、vux-loader（vux-ui、less-theme、duplicate-style 等插件）、less/yaml/babel 支持、viewport、Fastclick、vue-router 等 VUX 专属配置；
• 结论：新项目直接vue init airyland/vux2 projectPath即可；若团队已有自建 webpack 配置或使用 Vue CLI 3+，则参照 手动配置使用文档 与仓库中的 vue-cli-3-example 逐步补齐上述配置项，核心都是围绕vux-loader.merge展开。

对希望理解构建细节的读者，建议继续阅读 vux-loader 文档 中template-parser、style-parser、script-parser、i18n、html-build-callback等插件的用法——vux2 模板只是把这些工程能力以最省心的方式预置好了而已。

• UI组件
• 前端