laravel-mix升级后,应用程序将不再看到全局变量

时间:2018-12-13 03:18:01

标签: vue.js laravel-mix

我正在将一个项目从laravel-mix v2.0升级到v4.0,现在看到一个问题,在运行时我的组件无法像以前那样看到全局范围的变量。升级构建工具如何影响运行时间?

我知道我可以添加instance properties to the vue prototype,但这真的是我需要采取的方法吗?似乎它应该仍然能够像以前一样读取全局变量。

html

<script type="text/javascript">
    var games = [
       // a bunch of objects
    ];
</script>
<script src="{{ mix('js/app.js') }}"></script>

app.js

import ChannelSubscriptionSlider from './components/guild-subscriptions/ChannelSubscriptionSlider.vue';
Vue.component('channel-subscription-slider', ChannelSubscriptionSlider);

ChannelSubscriptionSlider.vue

import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);
export default {
    data: function () {
        return {
            games: games, // undefined when used within this component, but used to work before upgrade
        }
    },

1 个答案:

答案 0 :(得分:0)

编辑2

使用`window.games,这将在全局“注册”您的变量。


尽管我要做的是以下操作,但考虑将MPA而不是SPA:

在app.js中,我只保留以下几行:

require('./bootstrap');

window.Vue = require('vue');

在一个我创建的名为main.js的文件中,我将其作为示例:

import Sidebar from './components/layouts/Sidebar.vue'
import Topnav from './components/layouts/Topnav.vue'

new Vue({
  el: '#sidebar',
  render: h => h(Sidebar)
});

new Vue({
  el: '#topnav',
  render: h => h(Topnav)
});

在app.blade.php结尾处,我放了:

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

<script type="text/javascript">
    const user_props = {
        fullName : {!! json_encode(Auth::user()->fullName) !!},
        username : {!! json_encode(Auth::user()->username) !!},
    }

    user_props.install = function(){
      Object.defineProperty(Vue.prototype, '$userProps', {
        get () { return user_props }
      })
    }

    Vue.use(user_props);
</script>

<script src="{{ asset('js/main.js') }}"></script>

之所以可行,是因为我在app.js中安装了vue,但是在声明并安装了原型后才加载了使用user_props的组件。此外,由于vue已安装在app.js中,因此我可以使用{{ 1}}加载后...

忘了提到在webpack.mix.js中,您应该添加main.js:

Vue.use(user_props);

编辑1

根据您的评论和文档:https://vuejs.org/v2/cookbook/adding-instance-properties.html#The-Importance-of-Scoping-Instance-Properties

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .js('resources/js/main.js', 'public/js/') 只是一个约定:

  

...我们用$限制实例属性以避免这种情况。如果您愿意,甚至可以使用自己的约定(例如$ _appName或ΩappName)来防止与插件或将来的功能发生冲突。

因此请记住,您可以将其设置为:

$

然后您就可以在每个组件上以Vue.prototype.games = games; 的身份访问它

正如文档所暗示的那样,在执行此操作时,请务必不要覆盖它。因此,如果您在Vue组件的数据部分声明了它,我认为您应该删除这些行...