Vue 2 + VueRouter 2 + Laravel 5.3 - Webpack（运行时 x 独立构建问题）

Posted 2023-02-16

【中文标题】Vue 2 + VueRouter 2 + Laravel 5.3 - Webpack（运行时 x 独立构建问题）

【英文标题】：Vue 2 + VueRouter 2 + Laravel 5.3 - Webpack (Runtime x Standalone build issue)

【发布时间】：2017-02-14 00:32:14

【问题描述】：

我在尝试将 Vuejs 2 + Vue Router 2 + Laravel 5.3 与 webpack 一起使用时遇到错误！

这是我的代码：

我的 index.html

<div id="app">
        <router-view></router-view>
    </div>

我的 app.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Map from './map'

Vue.use(VueRouter);

const router = new VueRouter(
    routes: Map
);

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

我的应用程序.vue

<template>
    <router-view></router-view>
</template>

<script>
    export default 
        name: 'App',
    
</script>

有了这个有以下错误：

您正在使用仅运行时构建的 Vue，其中模板选项不可用。要么将模板预编译成渲染函数，要么使用编译器包含的构建。

如果我将 Vue 导入更改为： import Vue from 'vue' 到 import Vue from 'vue/dist/vue.js' 效果很好！

有人知道怎么解决吗？

【参考方案1】：

伙计们，我认为这与 laravel-elixie-vue 包有关！

我与 Anderson 合作，我们安装了新的 laravel 版本，它附带新的软件包 laravel-elixir-vue-2 并解决了问题！

当我们更新软件包时，Vedovelli 和 Vinicius 的 cmets 都能正常工作！

谢谢

【参考方案2】：

试试

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Map from './map'

Vue.use(VueRouter);

const router = new VueRouter(
  routes: Map
);

new App(
  router
).$mount('#app');

并从你的 index.html 中删除

【参考方案3】：

只需从 index.html 中删除 <router-view></router-view> 就可以了。