Vue3 适用于 unpkg 但不适用于 npm + webpack

Question

我正在尝试设置 Vue3，以便我可以通过 npm + webpack 使用它。由于某种原因，该组件未安装且未显示任何错误。如果我改用 unpkg 它会起作用。如何使 npm + webpack 选项起作用？

我的 package.json 中有 "vue": "^3.1.5" 和以下 webpack 配置：

module.exports = {
  mode: 'production',
  entry: {
    provider:  './src/components/provider.js',
    requester: './src/components/requester.js',
  },
  optimization: {
    minimize: false
  },
  output: {
    path: `${__dirname}/../public`,
    filename: '[name].js',
  }
}

requester.js:

import { createApp } from 'vue'

createApp({
  template: `
    <div>
      <div>
        <h2>Números recibidos</h2>
        {{ receivedNumbers }}
        <ul>
          <li v-for="n in receivedNumbers">{{ n }}</li>
        </ul>
      </div>
    </div>
  `,
  data() {
    return {
      receivedNumbers: [1,2,3],
      numberRequestIsOpen: false,
    }
  },
}).mount('#requester-component');

requester.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>requester</h1>

    <div id="requester-component"></div>
    <script src="requester.js"></script>
  </body>
</html>

结果html


    <h1>requester</h1>

    <div id="requester-component" data-v-app=""><!----></div>
    <script src="requester.js"></script>

另一方面，如果我在 html 的 head 标签中添加 <script src="https://unpkg.com/vue@next"></script> 并将 js 更改为：

Vue.createApp({
  //
}).mount('#requester-component');

那么结果 html 是


    <h1>requester</h1>

    <div id="requester-component" data-v-app=""><div><div><h2>Números recibidos</h2> [
  1,
  2,
  3
] <ul><li>1</li><li>2</li><li>3</li></ul></div></div></div>
    <script src="requester.js"></script>

这是预期的输出。

Link 到 repo 以防有帮助。上次commit添加了unpkg has，上次有npm version

Answer 1

https://github.com/vuejs/vue-next/issues/4275

In order to use the functionality of the vue.js template, you need to load the finished package with the compiler and runtime, but vue.js by default loads the runtime only version, so you need to explicitly specify the version (vue.esm-bundler.js)

添加

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler.js'
    }
  }

解决了问题。

Vue3 适用于 unpkg 但不适用于 npm + webpack

Vue3 works with unpkg but not with npm + webpack

browser

npm

webpack

vue.js

vuejs3