Subscribe on changes!

Error: Vue3.2.0 mount() return value type in different vue-cli-service serve –mode?

avatar
May 11th 2022

Version

3.2.0

Reproduction link

github.com

Steps to reproduce

  1. npm install;
  2. npm run prod

console.log:

VToast instance Proxy {_: {…}, __v_skip: true}

What is expected?

//vue-cli-service serve --mode production

VToast instance:VueInstance

What is actually happening?

//vue-cli-service serve --mode production

VToast instance:Proxy


src/components/VToast/index.js

import { createApp, nextTick, ref, h } from "vue";
import VToast from "./VToast.vue";

export default {
  install: (app, options) => {
    nextTick(() => { 
      /* Vue3的自定义插件 */
      // 1.实例化并绑定组件
      const constructor = createApp(VToast);
      const container = document.createElement('div');
      const instance = constructor.mount(container);

      // 2.将挂载的Node添加到body中
      document.body.appendChild(instance.$el);

      // 3.定义全局($toast即是此插件的名称)
      app.config.globalProperties.$vtoast = instance;

      console.log('VToast instance:', instance);
    })
  },
};

vue-cli-service serve is OK!

vue-cli-service serve --mode production: error

"vue": "^3.2.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
avatar
May 11th 2022

I think you can show this problem with sfc.

avatar
May 11th 2022

I can't reproduce this issue at sfc because of a project structure issue. sorry!