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

【问题标题】：Vue3 works with unpkg but not with npm + webpackVue3 适用于 unpkg 但不适用于 npm + webpack
【发布时间】：2021-10-12 03:51:28
【问题描述】：

我正在尝试设置 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');

请求者.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>

这是预期的输出。

链接到repo，以防它有助于玩耍。最后一次提交添加了unpkg，前一次添加了npm版本

【问题讨论】：

标签： vue.js npm webpack browser vuejs3

【解决方案1】：

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

为了使用 vue.js 模板的功能，你需要用编译器和运行时加载完成的包，但是 vue.js 默认只加载运行时版本，所以你需要显式指定版本（ vue.esm-bundler.js)

添加

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

解决了这个问题。

【讨论】：