Vue 2 - 重复的 Vue.js 实例答案

【问题标题】：Vue 2 - Duplicate Vue.js InstancesVue 2 - 重复的 Vue.js 实例
【发布时间】：2021-04-20 09:48:28
【问题描述】：

我创建了一个 Vue.js 库并将其包含在 Nuxt.js 项目中。问题是我看到 Nuxt 实例和库都创建了重复的 Vue.js 实例，而库应该使用 Nuxt.js 中的 Vue 实例：

您可以看到它从两个不同的实例中打印了两次。

如何确保只使用一个实例？这会导致各种问题。

我已经做过的事情：

库的 webpack 配置有 'vue' 作为外部依赖。（怎么可能即使它在库中被标记为外部，库仍然动态导入它？）
'vue' 是库的 package.json 文件中的 peerDependency。

附加信息：

库包含在 Nuxt 项目中，使用 npm link
这最终会导致 $attrs is readonly. 错误之类的错误。
这只发生在开发中，生产版本似乎工作正常。没有错误。
第一个实例来自webpack:///./node_modules/vue/dist/vue.runtime.esm.js?2b0e（大概是Nuxt.js）
第二个实例来自webpack-internal:///../minerva/node_modules/vue/dist/vue.runtime.esm.js（库）

该库导出此组件并具有此 webpack 配置：

import Vue from 'vue';
import Renderer from '../Renderer';
import {default as Attributes} from '../attributes/main';

const renderer = new Renderer();

renderer.registerAttributeType(Attributes.Bold);
renderer.registerAttributeType(Attributes.Color);

export default Vue.extend(
    {
        name: 'RenderPlane',
        props: {
            parsed: {
                type: Array,
                required: true
            }
        },

        render: function (createElement) {
            return createElement(renderer.render(this.parsed), null);
        }
    });

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = () => {
  return {
    mode: 'development',
    context: path.resolve(__dirname, 'source'),
    entry: {
      main: './main.ts',
      compiler: './renderer/main.ts',
      formatter: './formatter/main.ts',
      highlighter: './highlighter/main.ts',
      parser: './parser/main.ts'
    },

    output: {
      path: path.resolve(__dirname, 'build'),
      clean: true,
      library: {
        type: 'umd',
        name: 'Minerva'
      }
    },

    target: 'web',
    devtool: 'source-map',

    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.pegjs$/,
          use: 'pegjs-loader'
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ],
    },

    resolve: {
      extensions: ['.pegjs', '.vue', '.ts', '.js'],
      symlinks: false
    },

    externals: {
      vue: {
        commonjs: 'vue',
        commonjs2: 'vue',
        amd: 'vue',
        root: 'Vue'
      }
    },

    plugins: [
      new VueLoaderPlugin()
    ],
  }
}

在 Nuxt 项目中导入并使用如下：

import Vue from 'vue';

import {Parser, RenderPlane} from '@pilend-personal-stack/minerva';

const parser = new Parser();

export default Vue.extend({
  name: 'editor',

  components: {
    RenderPlane
  },

  data() {
    return {
      source: '',
      parsed: []
    };
  },

  watch: {
    source: function (val) {
      try {
        this.parsed = parser.process(val);
      } catch (err) {
        console.error('Error updating data: ' + err);
      }
    }
  },

  methods: {
    printParsed() {
      try {
        return JSON.stringify(this.parsed, null, 2);
      } catch (err) {
        return err.message;
      }
    }
  }

})

如果你能帮助我解决这个问题，我将永远感激你。

【问题讨论】：

能否请您使用Plugin 来导入您的库，看看问题是否仍然存在？
@ImanShafiei 我使用了一个插件并将 Vue 实例传递给库中的所有组件。现在它起作用了。谢谢！
我发布了一个答案，如果你觉得它有帮助，请考虑接受。

标签： javascript vue.js webpack vuejs2 nuxt.js

【解决方案1】：

正如我在 cmets 中所说，您应该使用 Plugin 来导入您的库。

例如，我有一个名为 my-custom-plugin.js 的文件：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

而在nuxt.config.js

plugins: [
    {
        src: '~plugins/nuxt-quill-plugin',
        ssr: false
    }
],

应该可以解决你的问题。

【讨论】：