Vue组件集成报错：require is not defined问题求助

阿华AIGC实验室

2026-5-11

解决"Require is not defined"错误：Vue单文件组件集成指南

Hey 哥们，我一眼就看出你这问题的根源了——浏览器原生不支持Node.js的CommonJS模块语法（require()），也没法直接解析ES6的import/export，更别说.vue这种单文件组件了！之前你的Vue代码能正常运行，大概率是直接用CDN引入Vue写的全局代码，没涉及模块化开发，但现在用上了单文件组件和第三方依赖，这些模块化语法必须通过打包工具转译才能被浏览器识别。

下面给你几种针对性的解决方案，根据你的项目场景选就行：

方案1：用Vue CLI一键搞定（推荐新项目/重构场景）

如果你的项目还处于初期，或者可以重构，直接用Vue CLI初始化项目，它会自动配置好Webpack打包环境，省超多事：

先全局安装Vue CLI：
```
npm install -g @vue/cli
```
创建新项目：
```
vue create my-vue-chart-project
```
把你的App.vue代码迁移到新项目的src/App.vue里，然后安装依赖：
```
npm install vue-fusioncharts fusioncharts
```

修改src/main.js（把插件注册逻辑放在这里更合理）：

import Vue from 'vue'
import App from './App.vue'
import VueFusionCharts from 'vue-fusioncharts'
import FusionCharts from 'fusioncharts'
import Column2D from 'fusioncharts/fusioncharts.charts'
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'

Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme)

new Vue({
  render: h => h(App)
}).$mount('#app')

打包生成生产环境代码：
```
npm run build
```
把dist文件夹里的js/app.xxx.js和css/app.xxx.css引入到你的Blade模板里就行。

方案2：Laravel项目专属（用Laravel Mix）

看你用了Blade模板，大概率是Laravel项目！Laravel自带的Mix已经帮你配置好了基础的打包环境，只需要几步就能支持Vue单文件组件：

安装必要的依赖：

npm install vue vue-fusioncharts fusioncharts
npm install laravel-mix vue-loader vue-template-compiler --save-dev

修改webpack.mix.js，启用Vue单文件组件编译：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .vue(); // 加这一行就搞定Vue组件编译

把你的App.vue放到resources/js/components/目录下，然后修改resources/js/app.js：

import Vue from 'vue'
import VueFusionCharts from 'vue-fusioncharts'
import FusionCharts from 'fusioncharts'
import Column2D from 'fusioncharts/fusioncharts.charts'
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'
import App from './components/App.vue'

// 注册插件
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme)
// 注册全局组件
Vue.component('Chart', App)

// 挂载Vue实例
new Vue({
    el: '#app'
})

运行打包命令（开发用dev，生产用prod）：
```
npm run dev
```

最后在Blade模板里引入打包后的JS：

<div id="app">
  <Chart></Chart>
</div>
<script src="{{ asset('js/app.js') }}"></script>

临时调试方案（仅用于快速验证，不推荐生产）

要是你只想快速验证代码逻辑，不想折腾打包工具，可以改成CDN引入所有依赖，去掉模块化语法：

在Blade模板开头先引入所有CDN资源：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fusioncharts@3.20.0/dist/fusioncharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fusioncharts@3.20.0/dist/fusioncharts.charts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fusioncharts@3.20.0/dist/themes/fusioncharts.theme.fusion.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-fusioncharts@3.0.0/dist/vue-fusioncharts.js"></script>

把组件逻辑改成全局注册的方式，去掉import/export和require：

Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme)

Vue.component('Chart', {
  template: `
    <div id="appp">
      <div id="chart-container"></div>
    </div>
  `,
  data() {
    return {}
  }
})

new Vue({
  el: '#app'
})