在Rails 5.1 Vue项目中配置webpack ProvidePlugin使用vue-introjs

嘿，我来帮你搞定这个问题！Rails Webpacker确实没有根目录下的webpack.config.js，它把Webpack的配置逻辑封装到了config/webpack/environment.js文件里，咱们只需要在这个文件里做修改就行，不用搞什么变通方案～

步骤1：修改Webpacker的环境配置文件 #

打开config/webpack/environment.js，添加Webpack的ProvidePlugin配置，让introJs能被全局识别：

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

// 注册ProvidePlugin，把introJs绑定到全局
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    introJs: ['intro.js', 'introJs']
  })
)

module.exports = environment

这里用prepend是为了确保这个插件在其他插件之前加载，避免可能的冲突。

步骤2：在Vue组件中使用vue-introjs #

你可以选择局部引入或者全局注册，两种方式都给你列出来：

方式一：局部引入（单个组件使用） #

在需要用到引导功能的Vue组件里这样写：

<template>
  <div>
    <button @click="triggerIntro">开始引导 tour</button>
    <!-- 给需要引导的元素加data-intro属性 -->
    <div data-intro="这是第一个引导步骤">我是目标元素</div>
  </div>
</template>

<script>
import VueIntro from 'vue-introjs'

export default {
  mounted() {
    // 在组件内注册vue-introjs
    this.$options.plugins.push(VueIntro)
  },
  methods: {
    triggerIntro() {
      // 调用引导方法
      this.$intro().start()
    }
  }
}
</script>

<!-- 别忘了引入intro.js的样式，不然引导框会没有样式 -->
<style scoped>
@import '~intro.js/introjs.css';
</style>

方式二：全局注册（所有组件都能用） #

如果你的多个组件都需要用到引导功能，直接在app/javascript/packs/application.js里全局注册更方便：

// app/javascript/packs/application.js
import Vue from 'vue'
import VueIntro from 'vue-introjs'
// 全局引入样式
import 'intro.js/introjs.css'

// 注册vue-introjs插件
Vue.use(VueIntro)

这样之后，任何Vue组件都可以直接调用this.$intro().start()来启动引导了。

小提示 #

• 确保你的vue-introjs和intro.js版本是兼容的，如果出现奇怪的报错，可以尝试锁定版本号重新安装
• 如果你需要自定义intro.js的配置，比如修改引导框的样式、按钮文字等，可以在调用this.$intro()的时候传入配置对象，比如：

this.$intro({
  nextLabel: '下一步',
  prevLabel: '上一步',
  doneLabel: '完成'
}).start()

内容的提问来源于stack exchange，提问作者bdx