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

编程问答 2022-04-30

问题描述

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

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

解决方法

  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>

  1. 从vue.global.prod.js下载https://unpkg.com/browse/[email protected]/dist/vue.global.prod.js并将其保存在index.html

  2. 在浏览器中打开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 削弱了这种限制（因为它的目的是嵌入），但无法使用桌面浏览器来开发和测试您的应用程序，您的体验会很糟糕。我会重新考虑不使用 bundler 的决定...

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

,

要将 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";
self-hostingunity3dunity3dvue.js