如何在Laravel中使用Vue CDN、解决报错并配置vue-router与组件

你遇到的PHP报错是因为Blade模板默认会解析{{ }}包裹的内容为PHP代码，修复步骤如下：

• 所有需要留给Vue解析的变量，全部在{{ }}前加@前缀转义，比如你代码里的@{{name}}写法是正确的，如果仍有报错，先检查其他Vue变量是否漏加@
• 如果已经全部加了转义前缀还是报错，执行命令php artisan view:clear清除Blade视图缓存即可解决
• 你当前代码存在的冲突问题：同时在Blade引入Vue CDN、在app.js中import Vue，二者选其一即可，推荐走Laravel官方的前端编译流程，删除Blade里的Vue、vue-router CDN引用，统一用npm安装的依赖。

前置依赖安装 #

在项目根目录执行以下命令安装对应依赖：

# 注意Vue2配套的vue-router为3.x版本，4.x版本仅支持Vue3
npm install vue vue-router@3

代码调整 #

1. 修改resources/js/app.js代码，完成Vue、vue-router注册和路由配置：

require('./bootstrap');
import Vue from 'vue';
// 注册vue-router
import VueRouter from 'vue-router';
Vue.use(VueRouter);

// 引入自定义Vue组件
import Home from './components/Home.vue';

// 定义路由规则
const routes = [
  { path: '/', component: Home }
];

// 初始化路由实例
const router = new VueRouter({
  routes
});

// 初始化Vue实例，挂载路由
let app = new Vue({
    el:'#app',
    router,
    data:{
        name:'project',
    }
});
export default app ;

2. 新建自定义Vue组件，示例路径resources/js/components/Home.vue：

<template>
  <div>
    <p>这是Home组件的内容，当前Vue变量name的值为：{{name}}</p>
  </div>
</template>
<script>
export default {
  name: 'Home'
}
</script>

3. 调整welcome.blade.php代码，删除冗余CDN引用，用asset函数引入编译后的资源，增加路由出口：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body class="antialiased">
    <div id="app">
        <h4>hello</h4>
        <h4>@{{name}}</h4>
        <!-- 路由匹配到的组件会渲染到此处 -->
        <router-view></router-view>
    </div>
    <!-- 引用编译后的app.js，不要用相对路径 -->
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

编译运行 #

• 开发环境执行npm run dev编译前端资源，如需实时监听文件变化自动编译，可执行npm run watch
• 生产环境部署时执行npm run prod编译压缩后的资源，提升加载速度

内容的提问来源于stack exchange，提问作者enamul haque