Laravel 为新项目初始化 vuejs答案

【问题标题】：Laravel initializing vuejs for new projectLaravel 为新项目初始化 vuejs
【发布时间】：2021-06-09 12:58:27
【问题描述】：

安装全新安装的Laravel 后，我安装了VueRouter，并在实现了如下所示的简单代码后，我无法使用VueJs，并且我在终端中没有收到任何错误：

命令没有显示任何错误，我从 Laravel mix 得到 build successful /resources/js/app.js内容：

import Vue from "vue";
import VueRouter from 'vue-router';
import ExampleComponent from "./components/ExampleComponent";

require('./bootstrap');


const routes = new VueRouter(
    {
        mode:'history',
        routes:[
            {
                path:'/',
                component:ExampleComponent
            }
        ]
    }
);
const app = new Vue({
    el: '#app',
    routes
});

/resources/js/bootstrap.js内容：

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

app.blade.php内容：

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
    @yield('content')
</div>
</body>
</html>

welcome.blade.php内容：

@extends('layouts.app')

@section('content')
    <div class="container">
        <router-view></router-view>
    </div>
@endsection

laravel web.php 内容：

Route::get('/{any}', function () {
    return view('welcome');
})->where('any','.*');

简单的 laravel composer.json:

"require": {
    "php": "^7.3|^8.0",
    "fideloper/proxy": "^4.4",
    "fruitcake/laravel-cors": "^2.0",
    "guzzlehttp/guzzle": "^7.0.1",
    "laravel/framework": "^8.12",
    "laravel/tinker": "^2.5",
    "laravel/ui": "^3.2"
},

webpack.mix.js内容：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

然后：

php artisan serve && npm run watch

在浏览器http://127.0.0.1:8000 中导航到/ 后我有空白页面

如何解决这个问题以使用vuejs？

【问题讨论】：

标签： javascript php laravel vue.js laravel-8

【解决方案1】：

关于 Vue 路由器，我通常有一个单独的 router.js 文件，因为它可能很长：

import Vue from 'vue'
import Router from 'vue-router'
...
Vue.use(Router)
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/users',
      name: 'users',
      component: () => import('./views/users/_users.vue'),
    }
    ...
 ]

 export default router

在 main.js 我有：

import router from './router' // path to router.js file
...
Vue.router = router
...

export default new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

【讨论】：

您的代码中的store 和render 是什么？
store 用于 Vuex 我忘了删除它我很抱歉，关于渲染 forum.vuejs.org/t/what-does-render-h-h-app-mean/53313 展开答案以完全查看它
非常感谢，我现在有laravel 和vuejs
我很高兴它有帮助......祝你好运，享受编码

【解决方案2】：

这些constraints 似乎是多余的：->where('any','.*')。

并且路线可能不匹配 - 或者 .htaccess 可能不存在；
例如。为any方法将正则表达式(.*)捕获到变量$page中：

Route::any('(.*)', function($page) {
    // dd($page);
    return view('welcome');
});

不确定，但您可能还需要Vue.use(VueRouter)； docs 的初始化方式也不同：

const app = new Vue({routes}).$mount('#app')

我的意思是，没有调试信息，甚至有两种方法可以安装 VueRouter。

【讨论】：