So kombinieren Sie VueJs mit Thinkphp

Wenn Vue auf dem Server bereitgestellt wird, wissen wir alle, dass die über den Befehl npm run build gepackte dist-Datei direkt durchsucht werden kann, indem man sie über http angibt. Thinkphp kann nur durchsucht werden, indem auf index.php verwiesen wird Datei über den Domänennamen. Damit das Front-End die Back-End-Daten normal aufrufen kann.

Es gibt zwei Methoden:

1. Das Front-End ruft zurück. Enddaten domänenübergreifend.

2. Die Front-End-Paketdatei wird im Back-End-Serverordner (gleiche Domäne) bereitgestellt.

Webserver: Apache

Zum Beispiel: domänenübergreifend

Konfigurieren Sie die Site auf dem Server:

在路径/home/www/  下创建test项目文件夹，用来放项目文件。
找到httpd-vhosts.conf文件配置站点
前端站点：
<VirtualHost *:80>
    ServerName test.test.com
    DocumentRoot "/home/www/test/dist"  
    DirectoryIndex index.html
</VirtualHost>
后端站点：
<VirtualHost *:80>
    ServerName test.testphp.com
    DocumentRoot "/home/www/test/php"  
    DirectoryIndex index.php
</VirtualHost>

Verpacken Sie das Frontend. Die gute dist-Datei wird im Ordner /home/www/test/ abgelegt und kann durch Ausführen von http://test.test.com durchsucht werden. Wenn sich der Pfad ändert, wird beim Aktualisieren ein 404-Fehler angezeigt. Erstellen Sie zu diesem Zeitpunkt eine .htaccess-Datei unter der dist-Datei. Wenn der Pfad nicht vorhanden ist, kann dieses Problem durch Verweisen auf http://test.test.com/index.html gelöst werden.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Erstellen Sie den PHP-Ordner des Projektstammverzeichnisses im Ordner /home/www/test und platzieren Sie die thinkphp-Datei unter PHP. Die Eintragsdatei von TP5 befindet sich unter der öffentlichen Datei. Verschieben Sie hier die Eintragsdatei index.php unter public in den PHP-Ordner (meine persönliche Angewohnheit ist es, die Eintragsdatei im Projektstammverzeichnis abzulegen) und binden Sie das Indexmodul daran Backend.

Das Front-End ruft die Back-End-Schnittstelle auf, es gibt domänenübergreifende Lösungen und es gibt mehrere domänenübergreifende Lösungen. Hier werde ich das Back-End-PHP konfigurieren, um das domänenübergreifende Problem zu lösen Legen Sie die domänenübergreifende Konfiguration im öffentlichen Controller fest:

class Common extends Controller
{
    public $param;
    // 设置跨域访问
    public function _initialize()
    {
        parent::_initialize();
        isset($_SERVER['HTTP_ORIGIN']) ? header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']) : '';
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId");
        $param =  Request::instance()->param();
        $this->param = $param;
    }
}

Das Frontend ruft die Anmeldeschnittstelle auf: this.axios.post('http://test.testphp.com/index.php/base/ login', {Benutzer: '', Passwort: ''}).

(Die Schnittstelle kann unter der Datei webpack.base.conf.js definiert werden: http://test.testphp.com/index.php/)

Gleiche Domäne

Die Backend-Konfiguration ist dieselbe wie oben, und die Anmerkung zur Header-Konfiguration im öffentlichen Konfigurator ist dieselbe. Platzieren Sie alle Dateien unter der Front-End-Dist-Datei (einschließlich .htaccess) im PHP-Ordner. Leiten Sie den Pfad der Indexmethode des Back-End-Index-Controllers zur Datei index.html unter PHP um:

namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
    public function index() {
        $this->redirect('/index.html');
}

Das Front-End ruft die Anmeldeschnittstelle auf: this.axios.post('/index.php /base/login', {Benutzer: '', Passwort: ''})

Weitere technische Artikel zu Thinkphp finden Sie in der Tutorial-Spalte Thinkphp, um mehr zu erfahren!

Das obige ist der detaillierte Inhalt vonSo kombinieren Sie VueJs mit Thinkphp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!