我想在没有构建和没有 CDN 的情况下使用 Vue 3答案

【问题标题】：I want to use Vue 3 without build and without CDN我想在没有构建和没有 CDN 的情况下使用 Vue 3
【发布时间】：2021-08-13 13:41:45
【问题描述】：

https://v3.vuejs.org/guide/installation.html#download-and-self-host

https://v3.vuejs.org/guide/installation.html#from-cdn-or-without-a-bundler

如何在没有 CDN 的情况下导入 vue？

所以我关心的是没有构建步骤。一切都在纯人类可读的 js 中。

我找到了这个https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack

我将尝试在统一嵌入式浏览器中实现它https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459

挑战在于我的界面无法从网络加载内容，也无法编译。

【问题讨论】：

要将 Vue 用作本地安装的模块，您不希望将其显式包含在页面的 script 标记中。相反，import 在使用它的脚本中。

标签： vue.js unity3d self-hosting

【解决方案1】：

创建index.html

index.html（使用 Vue 3 - 很重要！）

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Minimalistic Vue JS</title>
  <script type="text/javascript" src="./vue.global.prod.js"></script>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>
</body>
<script>
    var app = Vue.createApp({
      data() {
        return {
          message: "Hello world"
        }
      }
    })
    app.mount("#app")
</script>
</html>

从https://unpkg.com/browse/vue@3.0.11/dist/vue.global.prod.js下载vue.global.prod.js并将其与index.html一起保存
在浏览器中打开index.html

在 Chrome 或 Firefox 中运行良好。

备注

为了记录，我的代码是我链接的 repo 加上我下载并添加到根目录中的 vue 库

注意：以下与问题更改前的repo linked有关

repo 中的代码是为 Vue 2 编写的（只需尝试在浏览器中打开 https://unpkg.com/vue）。因此，如果您下载了 Vue 3 的发行版（例如我上面使用的链接），来自 repo 的代码将不起作用

即使您下载 Vue 2 版本，当从文件系统打开时，repo 中的代码也将无法工作，因为它使用的是本机 ES6 模块 - 我在之前版本的答案中描述的问题：

如here 和here 所述，ES6 模块总是加载 CORS。所以仅仅在浏览器中打开index.html（不使用服务器）是行不通的（在Chrome中肯定行不通）。也许 Unity Embeded Browser 削弱了这个限制（因为它的目的是嵌入）但是没有可能使用桌面浏览器来开发和测试你的应用程序，你的体验会很糟糕。我会重新考虑不使用捆绑器的决定...

更新 1 Building Vue.js Applications Without webpack (sample project) 也无济于事，因为它再次使用原生 ES6 模块

【讨论】：

你说得对，这是来自 vue 版本号，仅此而已。我不知道为什么这会被 CDN 链接抽象掉，这是反用户体验。我必须在这里开拓进取。我确实需要使用此设置加载其他 js 页面。

【解决方案2】：

要将Vue 用作本地安装的模块，您不希望将其显式包含在页面的script 标记中。相反，将其导入使用它的脚本中。模块的整个想法是您可以导入它们，这使得将它们明确包含在您的页面中已过时。

在https://bitbucket.org/letsdebugit/minimalistic-vue/src/master/index.js，导入Vue：

import * as Vue from "./local/path/to/vue.esm-browser.prod.js";

【讨论】：

不起作用。我在index.html中不导入vue，只导入index.js？
可能与强制 vue 先加载而不是其余部分有关？