Vue3项目集成CodeIgniter4遇exports未定义错误求助

问题根源 #

你直接在CI视图中引入Vue项目src目录下的main.js/ts是错误操作——Vue3项目源码使用了CommonJS/ESModule模块语法（比如exports、import），浏览器原生不支持未打包的模块代码，因此会抛出exports is not defined错误。必须通过打包工具将Vue源码转换为浏览器可识别的代码后再引入。

具体解决步骤 #

1. 配置Vue项目的打包输出路径 #

根据你使用的构建工具（Vite或Vue CLI），修改项目根目录的配置文件，将打包产物输出到CodeIgniter4的public目录：

若使用Vite（vite.config.js）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    // 输出到CI的public/vue-dist目录
    outDir: '../public/vue-dist',
    // 静态资源基础路径，对应CI的public根目录
    base: '/vue-dist/'
  }
})

若使用Vue CLI（vue.config.js）：

module.exports = {
  outputDir: '../public/vue-dist',
  publicPath: '/vue-dist/'
}

2. 打包Vue项目 #

在Vue项目根目录执行打包命令：

npm run build

执行完成后，CI的public/vue-dist目录会生成打包好的静态文件（包含assets文件夹、压缩后的JS/CSS等）。

3. 修改CodeIgniter4的视图文件 #

修改app/Views/index_vue.php，不再引入src下的源码，改为引入打包后的静态文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue + CI4 集成</title>
  <!-- 引入打包后的样式文件，替换[hash]为实际文件的哈希值 -->
  <link rel="stylesheet" href="/vue-dist/assets/index.[hash].css">
</head>
<body>
  <!-- Vue应用挂载容器 -->
  <div id="app"></div>
  <!-- 引入打包后的JS文件，替换[hash]为实际文件的哈希值 -->
  <script type="module" src="/vue-dist/assets/index.[hash].js"></script>
</body>
</html>

4. 实现CI视图与Vue页面的对应（可选） #

如果需要让CI的控制器对应Vue的不同页面：

• 在Vue项目中配置Vue Router，将src/views下的文件映射为前端路由；
• 在CodeIgniter4的app/Config/Routes.php中配置路由，指向对应控制器的视图：

$routes->get('/', 'HomeViewController::index');
$routes->get('/about', 'HomeViewController::about');

CI的每个视图只需引入相同的打包后JS文件，由Vue Router根据URL匹配对应的src/views页面。

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