<p>CodeIgniter 与 Vue.js 应严格分离：CI 仅作纯 API 服务（返回 JSON，禁用 HTML 渲染），Vue 独立运行并代理 API 请求；严禁混写、错放 dist 目录或滥用 CORS * 配置。</p>
CodeIgniter 本身不内置前端框架支持，和 Vue.js 结合不是“开箱即用”，而是靠明确分工：CI 做纯 API 服务（返回 JSON），Vue 做独立前端（通过 axios 请求）。强行在 CI 视图里 new Vue() 混写，后期维护成本高、调试困难、路由冲突多——这不是结合，是胶水粘连。
CI 必须退守为纯后端 API 层
CI 的控制器不该再渲染 HTML，所有输出必须是 application/json 格式，且响应头需显式设置：
$this->output->set_content_type('application/json');$this->output->set_output(json_encode($data));- 避免使用
echo json_encode(...)，它绕过 CI 输出类，可能丢失 header 或触发缓冲错误 - 若用 CodeIgniter RestServer 扩展，直接继承
REST_Controller，它已自动处理 content-type、状态码、CORS 基础逻辑
Vue 项目不能放在 CI 的 views/ 目录下
常见错误是把 vue-cli 生成的 dist/ 直接扔进 application/views/，然后用 $this->load->view('dist/index') 加载——这会导致 CI 的 URL 路由和 Vue Router 冲突，刷新 404。
- 正确做法：Vue 项目独立运行（
npm run dev或vite --host），开发时通过代理转发 API 请求到 CI - 生产环境：将
dist/整体复制到 CI 的public/目录（CI4）或 Web 根目录（CI3），并配置 Web 服务器 fallback 到index.html - Nginx 示例 fallback 配置：
location / { try_files $uri $uri/ /index.html; }，否则 Vue Router 的 history 模式会 404
跨域问题不能只靠 PHP header 硬塞
开发阶段用 Access-Control-Allow-Origin: * 看似简单，但会阻断带 Cookie 或认证头的请求；生产环境更不能留这种配置。
- CI 端建议统一在
app/Config/Filters.php（CI4）或基类控制器中加 CORS filter，只对/api/*路径生效 - Vue 端开发时优先用
vue.config.js的devServer.proxy（CI4 + Vue CLI）或vite.config.ts的server.proxy（Vue3 + Vite），把/api代理到http://localhost:8080，彻底规避浏览器跨域限制 - 若必须走真实跨域，CI 需同时设置：
Access-Control-Allow-Credentials: true、Access-Control-Allow-Headers（含Authorization）、Access-Control-Allow-Methods（如GET,POST,OPTIONS），且 origin 不能为*
Vue 组件里调用 CI 接口要防“空数据渲染”
刚初始化时 data 是空对象或空数组，但模板已开始渲染，容易报 Cannot read property 'xxx' of undefined。
立即学习“前端免费学习笔记（深入）”；
- 别在模板里直接写
{{ user.name }}，改用可选链：{{ user?.name }}（Vue3）或{{ user && user.name }}（Vue2） - 用
v-if="user"控制区块渲染，比v-show更安全 - API 请求失败时，
axios的.catch()必须显式赋值空态（如this.user = null），否则旧数据残留造成 UI 错乱 - 避免在
mounted()里裸写axios.get()，应封装成方法并加 loading 状态控制，否则用户连续点击按钮会发多个重复请求
output 缓存没关、Vue 的响应式属性没在 data() 里声明、或者跨域预检 OPTIONS 请求被 CI 的钩子函数意外拦截——这些点不在文档首页，但在每次 F12 Network 面板里都清清楚楚。 
