首页 文章

将Webpack ProvidePlugin与Rails 5.1一起用于Vue应用程序

提问于
浏览 次
0

我正在尝试在Rails 5.1应用程序中使用vue-introjs包 .

我已经通过纱线添加了 vue-introjs 和 intro.js 包 .

我想使用Rails webpacker gem而不是使用变通方法来完成这项工作 .

vue-introjs文档说webpack配置中需要以下内容：

// webpack.config.js
{
    plugins: [
        new webpack.ProvidePlugin({
            // other modules
            introJs: ['intro.js', 'introJs']
        })
    ]
}

Rails webpack安装程序默认没有 webpack.config.js 文件，但它确实有特定于环境的文件，因此我尝试将该配置添加到 /config/webpack/environment.js ，但这没有任何效果 .

然后我尝试调整在this github issue上找到的样本，它似乎尝试了类似于我想要的东西，但是虽然我可以在没有任何错误的情况下加载页面，但每当我尝试调用 myApp.$intro() 时，我仍然会收到错误 ReferenceError: introJs is not defined 应该返回introJs模块的一个实例 .

作为一个临时措施，虽然我无法实现这一点，但我也尝试将其放在我的webpack包文件的顶部，其中创建了Vue应用程序：

import introJs from 'intro.js'
import VueIntro from 'vue-introjs'

但是仍然有与上面相同的错误，即 introJs is not defined .

任何人都可以指出我如何包含introJs模块的正确方向，以便它的vue包装程序包能够正常工作吗？

ruby-on-rails webpack vuejs2

1 回答

  • 3

    以下是我将如何开始配置webpacker到目前为止您已安装的内容：

    // config/webpack/environment.js

const webpack = require('webpack');

const {environment} = require('@rails/webpacker');

environment.plugins.append(
  'ProvidePlugin-IntroJS', // arbitrary name
  new webpack.ProvidePlugin({
    introJs: ['intro.js', 'introJs']
  }),
);

module.exports = environment;

    在更改webpack配置时，您需要重新启动dev服务器 . 我希望您仍然需要在依赖图中的某处 import 'intro.js' .

    回复于

相关问题