将VueJS与CakePHP 3集成的最佳实践

1)在webroot的子目录中安装vuejs(如webroot / vuedev)

2)配置您的vue路由器以使用历史模式：

export default new Router({
  mode:'history',routes: [

3)在buildroot / vuedev / config / index.js中将构建区域的assetsPublicPath更改为assetsPublicPath：”

4)因为在开发模式下你的应用程序在localhost：8080上运行而你的ajax调用your-domain.dev你会遇到CORS问题.为您的ajax调用添加标头：

axios.get(url,{headers: {"Access-Control-Allow-Origin": "*"}}).then...

为你的ajax调用使用前缀“api”：your-domain.xxx/api/controller/action …

5)更改cakePHP的路由以使用REST api：
在config / routes.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/*','action' => 'display']);
    $routes->fallbacks(DashedRoute::class);
});

Ajax调用your-domain.xxx/api/controller/action将正常进行.
每次调用your-domain.com/xxx都会转移到控制器页面,操作显示.

6)将webroot / vuedev的index.html内容复制到模板主目录(src / Template / Pages / home.ctp)并添加到控制器的显示操作中.

$this->viewBuilder()->setLayout(false);

7)用于生产：
启动构建过程：

npm run build.

将webroot / vuedev / dist / static复制到webroot / static

将webroot / vuedev / dist / index.html的内容复制到src / Template / Pages / home.ctp

如果有人调用特定页面或刷新浏览器(即：your-domain.xxx/Products),您的页面控制器将发送index.html内容.
您可以在路由器使用的全局var in script标记中将te param：page添加到模板/ Pages / home.ctp：

<script>var routeToJump=<?php echo $yourvar;?>; </script>

在你的App.vue中：

export default {
  name: 'App',created() {
    this.$router.push(routeToJump);
    ...