仅在运行时构建带有 Browserify 的 Vue答案

【问题标题】：Vue with Browserify on Runtime only build仅在运行时构建带有 Browserify 的 Vue
【发布时间】：2017-08-10 10:16:56
【问题描述】：

我一直在努力解决这个问题，但我总是得到 p>

[Vue 警告]：您正在使用 Vue 的仅运行时构建，其中模板编译器不可用。预编译模板进入渲染函数，或使用编译器包含的构建。（在发现 )

我将 laravel 5.2 与带有 elixir 和 vue 2.2.2 的 browserify 一起使用

我正在尝试显示一个简单的视图

这是我的 app.js

从'vue'导入Vue；
从'./components/Test.vue'导入测试；

new Vue({ el : '.container', render: h => h(Test) })

Test.vue

<template>
    <div class="view">
        <h1>{{msg}} </h1>
    </div>
</template>


<script type="text/javascript">
export default {
    data (){
        return {
            msg : 'This is Vue'
        }
    }
}
</script>

<style>
    div.view{
        padding:2em;
        position: relative;
    }


</style>

【问题讨论】：

答案是什么？
@justin.m.chase 我没有答案。我想只使用运行时构建，因为它是轻量级的。没有人能给我答案。
我实际上设法解决了这个问题，但我使用的是 webpack 而不是 browserify。问题似乎是，如果您只是使用require('vue')，则默认结果算法转到的文件没有模板编译器，正如错误所说。如果您在服务器渲染器的节点中运行它，那么它可以工作，但如果您尝试为浏览器打包它，它就会丢失。所以你需要做的是本质上需要 vue.common.js，我可以在 webpack 中通过将其添加到配置中来做到这一点：resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' }}
这个问题应该被删除。这个我已经想好了。
我认为离开它很好，我比找到实际解决方案更快地找到了这个，如果他们有同样的问题，这里的 cmets 会帮助某人。

标签： laravel vuejs2

【解决方案1】：

你在使用 laravel-elixir-vueify 吗？尝试使用 laravel-elixir-vue-2 代替..您也可以尝试在 package.json 的“浏览器”中设置 vue.common.js（我正在使用带有 gulp 和 browserify 的 npm）..like：

"browse": { "vue": "vue/dist/vue.common.js" }

【讨论】：

【解决方案2】：

也许这可能会有所帮助。这是我的设置示例。我也在使用VueRouter。

app.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './components/App.vue';
import Home from './components/Home.vue';

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [{
        path: '/',
        name: 'home',
        component: Home
    },
// .. others
});

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

App.vue：

<template>
    <div id="app">
        <p>
            <router-link to="/foo">Foo</router-link>
            <router-link to="/foo2">Foo 2</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    // empty
}
</script>

index.html:

<div id="app-container"></div>

希望对你有帮助。

参考：https://github.com/vuejs-templates/webpack/issues/215#issuecomment-292071919

【讨论】：