Question

我目前正在尝试使用webpack.ProvidePlugin，但似乎没有正确加载它。这是我的environment.js

var webpack = require("webpack");

const { environment } = require("@rails/webpacker");
const vueLoader = require("./loaders/vue");

environment.loaders.append("vue", vueLoader);

environment.plugins.append(
  "Provide", // arbitrary name
  new webpack.ProvidePlugin({
    Vue: "vue",
    _: "lodash"
  })
);

module.exports = environment;

和我的档案Header.vue

<h1>{{_.capitalize(title)}} </h1>

错误：

vue.runtime.esm.js:587 [Vue warn]: Property or method "_" is not defined on
 the instance but referenced during render. Make sure that this property is 
reactive, either in the data option, or for class-based components, by 
initializing the property.

Answer 1

您可以为Vue使用vue-lodash插件，该插件在Vue模板中提供lodash，您的代码也可以使用。

安装它（npm i vue-lodash）并配置Vue使用它：

import Vue from 'vue'
import VueLodash from 'vue-lodash'

Vue.use(VueLodash, options)

你可以像在Header.vue中那样在你的Vue模板中使用lodash：）

Answer 2

这与webpacker，webpack或ProvidePlugin无关。您可以通过从组件中访问_（即在创建的挂钩中）轻松地检查这一点。

当您尝试从template

引用该方法时，问题便会出现

模板表达式是沙箱化的，只能访问全局变量白名单，例如Math和Date。您不应尝试在模板表达式中访问用户定义的全局变量。

为了使访问成为可能，您可以在数据中添加_：

  data: function () {
    return {
      _
    }
  },

但是，在Vue中不建议使用_或$作为前缀或名称，因为框架本身保留了很多这些名称（Source）：

以_或$开头的属性不会在Vue实例上代理，因为它们可能与Vue的内部属性和API方法冲突。您必须以vm。$ data._property。
的形式访问它们

Link1 Link2

因此，你可以使用＆＃39; lodash＆＃39;而不是＆＃39; _＆＃39;。

environment.plugins.append(
  "Provide", // arbitrary name
  new webpack.ProvidePlugin({
    Vue: "vue",
    lodash: "lodash"
  })
)

...

  data: function () {
    return {
      lodash
    }
  },

在野外，实际上以全局方式访问lodash的方法是：

将lodash添加到Vue原型：

无论

Vue.prototype._ = _

或

Object.defineProperty(Vue.prototype, '_', { value: _ })

Source

如前所述将其添加为插件

Source

如何在webpacker rails中使用ProvidePlugin？

2 个答案: