vue在服務端部署時，我們都知道通過npm run build 指令打包好的dist檔案，通過http指定是可以直接瀏覽的，Thinkphp通過域名指向index.php檔案才可以瀏覽，要使前端正常呼叫后端資料，
有兩種方法：
1、前端跨域呼叫后端資料，
2、前端打包檔案部署在后端的服務器檔案夾下（同域），
web服務器： apache
如：跨域
在服務器配置站點：
在路徑/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>
將前端打包好的dist檔案放在/home/www/test/ 檔案夾下，運行http://test.test.com可瀏覽，當路徑改變時，重繪會出現404錯誤，此時dist檔案下創建一個.htaccess檔案，當路徑不存在時，路徑指向http://test.test.com/index.html能解決此問題，
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]</IfModule>
鏈接：https://pan.baidu.com/s/1v5gm7n0L7TGyejCmQrMh2g 提取碼：x2p5
免費分享，但是X度限制嚴重，如若鏈接失效點擊鏈接或搜索加群 群號518475424，
在/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: ''})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/57084.html
標籤：其他
上一篇：Bigo的Java面試，我掛在了第三輪技術面上.........
下一篇：程式員的路是一行一行走出來的