vuejs怎麼和thinkphp結合

2022-02-28 09:26:26 字數 1607 閱讀 1710

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/ 資料夾下,執行可瀏覽,當路徑改變時,重新整理會出現404錯誤。此時dist檔案下建立乙個.htaccess檔案,當路徑不存在時,路徑指向/index.html能解決此問題。

rewriteengine on

rewritebase /

rewriterule ^index\.html$ - [l]

rewritecond % !-f

rewritecond % !-d

rewriterule . /index.html [l]

在/home/www/test資料夾下建立專案根目錄php資料夾,將thinkphp檔案放在php下。tp5的入口檔案在public檔案下,在這將public下的入口檔案index.php挪到php資料夾下(個人習慣將入口檔案放在專案根目錄), 後端繫結index模組。

前端呼叫後端介面,存在跨域,跨域解決方法有好幾種,在這我將在後端php做配置,解決跨域問題,在公用控制器設定跨域配置:

class common extends controller

}

前端呼叫登入介面: this.axios.post('', )。

(可在webpack.base.conf.js檔案下可定義介面:

後端配置同上,公共配置器中的header配置注釋。將前端的dist檔案下的所有檔案(包含.htaccess),放在php資料夾下。將後端index控制器的index方法的路徑重定向php下的index.html檔案:

use think\controller;

class index extends controller

前端呼叫登入介面: this.axios.post('/index.php/base/login', )

或者

<?php

use think\controller;

use think\facade\env;

class index extends controller

}

phpstudy 上怎麼執行 thinkPHP

最近在學習 thinkphp 但是本地使用的是 phpstudy 就想在 phpstudy 中使用 thinkphp 這樣我的環境就不用再改變也可以學習。第二步 解壓 thinkphp 5.0.5 full.rar 並將解壓後的 thinkphp 5.0.5 full 資料夾名稱改為你的專案名稱,比...

Vuejs之路之 style和class的繫結

資料繫結乙個常見需求是操作元素的 class 列表和它的內聯樣式。因為它們都是屬性 我們可以用v bind 處理它們,在 v bind 用於 class 和 style 時,表示式的結果型別除了字串之外,還可以是物件或陣列。直接上 切換class 其實繫結class類名還可以用在元件上,但是用法是一...

關於vuejs移動端元件vant,和remjs

1 有讚 vant 2 1 瀏覽器預設font size 16px 在自己寫專案的時候需要除以100,以下js 有說明。舉例,width 200px,換算成自己實際需要的rem,則是width 2rem。2 專案一般以iphone的機型 375x667 為標準並且乘以2,等於750x1334。那麼,...