Хорошо, вот быстрая настройка:
1) установить vuejs в подкаталоге webroot (например, webroot / vuedev)
2) настроить маршрутизатор vue для использования режима истории:
export default new Router({
mode:'history',
routes: [
3) Измените assetsPublicPath зоны сборки на assetsPublicPath: '', в webroot / vuedev / config / index.js
4) Потому что в режиме разработки ваше приложение работает localhost: 8080 и ваш ajax-вызов your-domain.dev у вас будут проблемы с CORS.Добавьте заголовок к вашим вызовам ajax:
axios.get(url,{headers: {"Access-Control-Allow-Origin": "*"}}).then...
используйте префикс "api" для ваших вызовов ajax: your-domain.xxx/api/controller/action...
5) Изменитьмаршрутизация cakePHP для использования REST api: в config / rout.php:
// add api prefix
Router::prefix('api', function ($routes) {
$routes->fallbacks(DashedRoute::class);
});
// change default route :
Router::scope('/', function (RouteBuilder $routes) {
$routes->connect('/:page',['controller'=>'Pages','action'=>'display']);
$routes->connect('/', ['controller' => 'Pages', 'action' => 'display', 'home']);
$routes->connect('/pages/*', ['controller' => 'Pages', 'action' => 'display']);
$routes->fallbacks(DashedRoute::class);
});
Ajax вызывает your-domain.xxx / api / controller / action будет продолжаться в обычном режиме.Каждые вызовы your-domain.com / xxx будут передаваться на страницы контроллера, показ действий.
6) Скопируйте содержимое index.html вашего webroot / vuedev в свой шаблон дома(src / Template / Pages / home.ctp) и добавьте к вашему дисплею действие вашего контроллера.
$this->viewBuilder()->setLayout(false);
7) Для производства: Запустите процесс сборки:
npm run build.
Копироватьwebroot / vuedev / dist / static to webroot / static
Скопируйте содержимое файла webroot / vuedev / dist / index.html в ваш файл src / Template / Pages / home.ctp
Если кто-то позвонитВручную определенную страницу или обновите браузер (то есть: your-domain.xxx/Products), ваш контроллер страниц будет отправлять содержимое index.html.Вы можете добавить te param: page к вашему шаблону / Pages / home.ctp в глобальную переменную тега script, которая будет использоваться маршрутизатором:
<script>var routeToJump=<?php echo $yourvar;?>; </script>
И в вашем App.vue:
export default {
name: 'App',
created() {
this.$router.push(routeToJump);
...