XAMPP环境下运行Vue项目 XAMPP前端打包文件部署教程-php教程-PHP中文网

不能直接把 vue 项目源码丢进 xampp 的 htdocs 目录运行，因 apache 不识别 .vue 文件、不支持 es 模块和 vue-router history 模式，会导致白屏、404 或 net::err_aborted；正确做法是先构建（npm run build 或 npm run build），再将 dist/ 内容放入 htdocs 子目录，并配置 publicpath/base、.htaccess 重写及 router base 三者一致。

xampp环境下运行vue项目 xampp前端打包文件部署教程

不能直接把 Vue 项目源码丢进 XAMPP 的 htdocs 目录运行——它会白屏、404、报 net::ERR_ABORTED 或 Failed to load module script，因为 Apache 不认识 .vue 文件、不处理 ES 模块导入、也不支持 vue-router 的 history 模式路由。

构建后部署：先 `npm run build`，再放 `dist/` 到 htdocs

Vue CLI（或 Vite）项目必须先构建为纯静态资源，才能被 Apache 正确服务。构建产物是 HTML + JS + CSS 的组合，不含任何构建时依赖。

npm run build（Vue CLI）或 npm run build（Vite）生成 dist/ 目录
检查 dist/index.html 中的 script/link 路径是否以 ./ 开头（如 ./js/app.xxxx.js），否则浏览器会从根路径加载，404
若路径不对，在 vue.config.js（CLI）中设 publicPath: './'；在 vite.config.ts 中设 base: './'
把整个 dist/ 文件夹内容复制到 XAMPP/htdocs/my-app/（不要只复制 dist 文件夹本身）
访问 http://localhost/my-app/ —— 注意结尾斜杠必须有，否则 history 路由刷新会 404

`vue-router` history 模式下刷新 404？加 `.htaccess` 重写

Apache 默认按文件路径找资源，而 Vue 是单页应用，所有前端路由（如 /user、/admin）都该返回 index.html，否则直接 404。

确保 httpd.conf 中已启用重写模块：LoadModule rewrite_module modules/mod_rewrite.so 前面的 # 已去掉
找到 <directory></directory> 区块，把 AllowOverride None 改成 AllowOverride All
在部署目录（如 XAMPP/htdocs/my-app/）下新建 .htaccess 文件，内容为：

RewriteEngine On
RewriteBase /my-app/
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /my-app/index.html [L]

注意：RewriteBase 必须和你的实际 URL 路径一致（比如部署在子目录 /my-app/，就不能写 /）

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

子目录部署时，`router` 的 `base` 必须同步改

光改 publicPath 或 base 配置项不够——vue-router 也得知道它跑在子路径下，否则所有 router.push 和导航守卫都会错位。

在 src/router/index.js（或 .ts）中，确认 base 值与部署路径匹配：

const router = new VueRouter({
  base: '/my-app/', // 必须和 .htaccess 中的 RewriteBase 一致
  mode: 'history',
  routes
})

如果是 Vue 3 + createRouter，写法类似：base: import.meta.env.BASE_URL || '/my-app/'
如果用的是 Vite，且 vite.config.ts 中 base: './'，那 base 应设为 '.' 或动态读取 import.meta.env.BASE_URL，但最终效果需和实际 URL 结构对齐

开发阶段别碰 XAMPP —— 用 `vue-cli-service serve` 或 `vite` 本地起服务

开发时硬塞进 XAMPP，等于主动放弃热更新、Source Map、ESM 支持、代理转发等核心能力，调试效率断崖下跌。

保持终端在项目根目录，运行 npm run serve（Vue CLI）或 npm run dev（Vite），默认地址是 http://localhost:5173 或 http://localhost:8080
若需调用 XAMPP 的 PHP 接口（如 http://localhost/api/user），在 vue.config.js 配 devServer.proxy，或在 vite.config.ts 配 server.proxy
例如代理所有 /api/ 请求到 XAMPP：proxy: { '/api': { target: 'http://localhost', changeOrigin: true } }