如何创建可静态部署的Vue.js前端对接PHP REST API？

1. 配置资源基础路径 #

新建或修改项目根目录的vue.config.js，设置publicPath确保编译后资源路径正确：

module.exports = {
  // 生产环境下用根路径，若部署在子目录则改为对应路径（如'/frontend/'）
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
}

这样编译后的图片、JS/CSS路径会和部署环境匹配，不会出现路径错误。

2. 调整路由模式解决路径访问问题 #

默认的history路由模式需要后端支持重写，如果你不想修改PHP后端，直接切换到hash模式：

// 在router/index.js中修改
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash', // 替换history模式
  routes
})

export default router

hash模式下所有路由都会带#，静态服务器能直接识别，访问任意子路径不会返回404，也无需后端修改。

3. 编译生成静态资源 #

在项目根目录执行生产编译命令：

npm run build

执行完成后，项目根目录会生成dist文件夹，里面包含所有可直接部署的静态文件（HTML、压缩后的JS/CSS、图片等）。

4. 对接PHP API #

调用API时直接使用相对路径（前后端同域名）或完整URL：

// 示例：用axios调用PHP API
import axios from 'axios'

// 若API在同域名的/api路径下
axios.get('/api/get-data')
  .then(res => {
    // 处理返回数据
  })
  .catch(err => {
    // 处理错误
  })

如果前后端跨域名，需在PHP后端配置CORS允许前端域名的请求。

最后把dist文件夹内的所有文件通过FTP上传到PHP主机的对应目录即可，无需额外依赖Node.js运行环境。

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