vue在服务端部署时,我们都知道通过npm run build 指令打包好的dist文件,通过http指定是可以直接浏览的,Thinkphp通过域名指向index.php文件才可以浏览。要使前端正常调用后端数据。

有两种方法:
1、前端跨域调用后端数据。
2、前端打包文件部署在后端的服务器文件夹下(同域)。
web服务器: apache
如:跨域
在服务器配置站点:
在路径/home/www/ 下创建test项目文件夹,用来放项目文件。 找到httpd-vhosts.conf文件配置站点 前端站点:ServerName test.test.com DocumentRoot "/home/www/test/dist" DirectoryIndex index.html 后端站点:ServerName test.testphp.com DocumentRoot "/home/www/test/php" DirectoryIndex index.php
将前端打包好的dist文件放在/home/www/test/ 文件夹下,运行http://test.test.com可浏览,当路径改变时,刷新会出现404错误。此时dist文件下创建一个.htaccess文件,当路径不存在时,路径指向http://test.test.com/index.html能解决此问题。
RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]
在/home/www/test文件夹下创建项目根目录php文件夹,将thinkphp文件放在php下。TP5的入口文件在public文件下,在这将public下的入口文件index.php挪到php文件夹下(个人习惯将入口文件放在项目根目录), 后端绑定Index模块。
前端调用后端接口,存在跨域,跨域解决方法有好几种,在这我将在后端php做配置,解决跨域问题,在公用控制器设置跨域配置:
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; } }
前端调用登录接口: this.axios.post('http://test.testphp.com/index.php/base/login', {user: '', password: ''})。
(可在webpack.base.conf.js文件下可定义接口:http://test.testphp.com/index.php/)
同域
后端配置同上,公共配置器中的header配置注释。将前端的dist文件下的所有文件(包含.htaccess),放在php文件夹下。将后端index控制器的index方法的路径重定向php下的index.html文件:
namespace app\index\controller; use think\Controller; class Index extends Controller { public function index() { $this->redirect('/index.html'); }
前端调用登录接口: this.axios.post('/index.php/base/login', {user: '', password: ''})
更多Thinkphp相关技术文章,请访问Thinkphp教程栏目进行学习!
Atas ialah kandungan terperinci vuejs怎么和thinkphp结合. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Mana satu lebih mudah, thinkphp atau laravel?
Bagaimanakah prestasi thinkphp?
Bagaimana untuk menangani lag komputer yang perlahan dan tindak balas yang perlahan
Keperluan konfigurasi minimum untuk sistem win10
Akhiran nama fail pengubahsuaian kelompok Linux
Bina pelayan Internet
Foto Windows tidak boleh dipaparkan
Bagaimana untuk menggunakan fungsi dict dalam Python