Question

我正在使用Laravel 5.7开发API。客户端，我有一个Vue应用程序，可以使用API中的数据。我无法使“ /”路由重定向到我的VueJS应用。

Laravel路线：

Route::get('/{any}', 'SpaController@index')->where('any', '.*');

控制器：

public function index()
{
    return view('index');
}

index.blade.php：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="{{csrf_token()}}">
  <title>mtm</title>
  <link href=" {{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
 <div id="app">
   <app></app>
 </div>
 <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

app.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueResource from 'vue-resource'


Vue.config.productionTip = false
Vue.use(VueResource)

export const notificationBus = new Vue();


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

webpack配置：

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

mix.webpackConfig({
    resolve:{
        extensions:['.js','.vue'],
        alias:{
            '@': __dirname + '/resources'
        }
    }
})

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

我的错误：在运行“ npm run wtach”时：多个./node_modules/webpack-dev-server/client中的错误？http://localhost:8080 ./src

Webpack无法编译我的文件，因此我的浏览器控制台出现此错误：SyntaxError：预期表达式，在app.js中为“ <”

我在配置中有点迷路了...

我的router.js和App.vue中的代码在下面

router.js：

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from './views/Dashboard.vue'
import Ogmep from './views/Ogmep.vue'
import fdr from './views/Fdr.vue'
import mep from './views/Mep.vue'
import notfound from './components/404.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'dashboard',
      component: Dashboard
    },
    {
        path: '/ogmep/:id',
        name: 'ogmep',
        component: Ogmep
    },
    {
        path: '/mep/:id',
        name: 'mep',
        component: mep
    },
      {
          path: '/fdr/:id',
          name: 'fdr',
          component: fdr
      },
      {
          path: '/404',
          name: 'notfound',
          component: notfound
      }
  ]
})

App.vue：

<template>
  <div id="app">
    <div class="ui menu">
      <div class="item">
        <div class="ui medium header">
          <h1>MTM</h1>
        </div>
      </div>
      <div class="item">
        <router-link :to="{ name:'dashboard' }">
          <i class="ui large teal dashboard icon"></i>
          Dashboard
        </router-link>
      </div>
    </div>
    <Notification></Notification>
    <DeleteModal></DeleteModal>
    <!--<Loader></Loader>-->
    <div id="content-site">
      <router-view/>
    </div>

  </div>
</template>

<script>
  import Notification from "./components/Notification"
  import DeleteModal from "./components/DeleteModal"
  import Loader from "./components/Loader";
  export default {
      name: 'App',
      components: {
          Loader,
          Notification,
          DeleteModal,
      }
  }
</script>

<style>
#app {
  margin: 0px;
}
  #content-site{
    padding: 15px;
  }
</style>

使用laravel和vueJS设置spa

0 个答案: