Laravel 5.5中如何从public目录引入Vue组件？

开发者阿泽

2026-5-20

嘿，这个问题我太熟悉啦！你碰到的Uncaught ReferenceError: require is not defined错误，本质原因有两个：一是浏览器本身不支持Node.js环境里的require()模块导入语法，二是.vue单文件组件属于Vue的专属格式，没法直接在浏览器里运行，必须经过构建工具的编译处理才行。下面给你几个不同场景下的解决方案，你可以根据自己的需求选：

解决方案1：用Vue CLI搭建项目（最推荐，官方标准流程）

这是Vue官方主推的方式，它会帮你自动配置好Webpack等构建工具，一站式解决.vue组件编译、模块导入的问题：

先全局安装Vue CLI：
```
npm install -g @vue/cli
```
创建新项目：
```
vue create my-cropper-project
```
把你的.vue组件放到项目的src/components目录下

在入口文件src/main.js里导入并注册组件：

import Vue from 'vue'
import CropperAdmin from './components/CropperAdmin.vue'

// 全局注册组件，或者在局部组件里注册都可以
Vue.component('cropper-admin', CropperAdmin)

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

启动开发服务：
```
npm run serve
```
之后浏览器就能正常加载组件啦。

解决方案2：用CDN结合ES模块导入（无需构建工具，适合小型项目）

如果你不想折腾构建工具，可以把.vue组件转换成普通的JS模块，再用浏览器原生的ES模块语法导入：

把你的.vue组件拆成独立的JS文件（比如命名为cropper-admin.js）：

export default {
  template: '<div>test</div>',
  // 这里可以加组件的data、methods等逻辑
}

在HTML文件里用type="module"的script标签引入：

<div id="appCropper">
  <cropper-admin></cropper-admin>
</div>

<!-- 引入Vue的CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 用ES模块语法导入组件 -->
<script type="module">
  import CropperAdmin from './cropper-admin.js'
  
  new Vue({
    el: '#appCropper',
    components: {
      'cropper-admin': CropperAdmin
    }
  })
</script>

解决方案3：手动配置Webpack（适合需要高度自定义的场景）

如果你想自己掌控构建流程，可以手动配置Webpack+vue-loader来处理.vue文件：

初始化项目：
```
npm init -y
```

安装必要依赖：

npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server

创建webpack.config.js配置文件：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

在src/main.js里导入组件：

import Vue from 'vue'
import CropperAdmin from './components/CropperAdmin.vue'

new Vue({
  el: '#appCropper',
  components: {
    'cropper-admin': CropperAdmin
  }
})

在package.json里添加启动脚本：

"scripts": {
  "dev": "webpack serve",
  "build": "webpack"
}

运行npm run dev就能启动开发服务了。

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