在浏览器环境使用VueNumberFormat(Vue2库)遇require未定义错误求解决方案

问题原因 #

你引入的vue-number-format@1.3.1/dist/library.js是CommonJS模块格式，内部使用了Node.js专属的require语法，浏览器原生不支持该语法，因此触发报错。

解决方案：替换为UMD格式的CDN文件 #

改用该库适配浏览器环境的UMD打包版本，替换原CDN链接即可：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 替换为UMD格式的bundle文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue-number-format@1.3.1/dist/library.umd.js"></script>

之后正常调用Vue.use初始化：

Vue.use(VueNumberFormat, {prefix: 'R$ ', decimal: ',', thousand: '.'});

替代方案 #

如果仍有兼容性问题，可以考虑以下两种替代方式：

1. 自定义Vue过滤器 #

无需依赖第三方库，自己实现数字格式化逻辑，灵活可控：

Vue.filter('numberFormat', function(value) {
  if (!value) return 'R$ 0,00';
  // 基于巴西本地化规则格式化数值
  return value.toLocaleString('pt-BR', {
    style: 'currency',
    currency: 'BRL'
  });
});

模板中直接使用过滤器：

<p>{{ price | numberFormat }}</p>

2. 使用其他适配浏览器的Vue数字格式化库 #

比如vue2-number-input，支持格式化显示与输入，直接引入UMD格式CDN即可使用：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-number-input@1.3.0/dist/vue2-number-input.umd.min.js"></script>

注册组件后在模板中使用：

Vue.component('vue-number-input', Vue2NumberInput);

<vue-number-input 
  v-model="price" 
  :prefix="'R$ '" 
  :decimal="','" 
  :thousand="'.'"
></vue-number-input>

内容的提问来源于stack exchange，提问作者Alex Zhulin