vuejs项目文件夹中的PHP后端答案

【问题标题】：PHP backend inside vuejs project foldervuejs项目文件夹中的PHP后端
【发布时间】：2019-09-18 14:06:24
【问题描述】：

我在我的文档/项目文件夹中创建了一个 vue/cli 3 项目及其。我使用“npm run serve”命令在端口 3000 上运行它。现在，我想在某处有一个后端文件夹来提供 PHP 文件。但我希望前端和后端都在同一个文件夹结构中。

目前，我的 vue 在我的文档文件夹中，我的 php 在我的 xampp 文件夹中。我遇到的问题是为同一个应用程序管理 2 个文件夹和 git。此外，这会导致我的 vue projet 的 ajax 调用使用愚蠢的 url，例如“http://localhost:80/project/file.php”。我想使用我的 vue 项目中某处的“backend/clients/getClient.php”之类的相对路径。

这就是我想要的：

myProject
  frontend
    my vue stuff like public and src folders
  backend
    my php files

不必完全如此，但关键是现在我有一个文件夹和一个项目的 git。

谢谢。

【问题讨论】：

您可以将 Vue 包含到您的普通 PHP 项目中并合并项目，但我相信它会要求您在看到更新之前将您的 Vue 编译为 JS。有插件watch为你修改并自动编译。

标签： php vue.js

【解决方案1】：

我这样做的方法如下：

1) 我将 php 文件放在 vue/cli 项目结构中的 public/ 文件夹的子文件夹中。这样，这些文件将在构建项目时被复制到 dist 文件夹中。

例如：我有文件/public/api/endpoint.php，这将在dist/api/endpoint.php结束。

为了在本地进行测试，我现在在更改 php 文件时将它们复制到 xampp/htdocs 目录。但我想你可以通过设置xampp alias directory 跳过这一步。（但我自己还没有尝试过）

2) 本地开发模式和生产模式之间的 ajax url 仍然不同。为了解决这个问题，我在 vue.config.js 中定义了一个 webpack 插件：

const webpack = require('webpack')

const API_URL = {
  production: JSON.stringify('https://www.project.com/api/endpoint.php'),
  development: JSON.stringify('http://localhost/project/api/endpoint.php')
}

// check environment mode
const environment =
  process.env.NODE_ENV === 'production' ? 'production' : 'development'

module.exports = {
  ...
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        API_URL: API_URL[environment]
      })
    ]
  },
  ...
}

然后在 vue/js 文件中使用它，例如：

const apiUrl = API_URL  // eslint-disable-line

（仅需要eslint指令如果你用eslint打开了linting，它会抛出API_URL未定义的错误。）

【讨论】：