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

Question

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

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

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

Answer 1

要将 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";

Answer 2

创建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 中工作正常。

备注

for the record my code is the repo I linked plus the vue libraries I downloaded and added in the root

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

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

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

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

更新 1 Building Vue.js Applications Without webpack (sample project) 也不会帮助你，因为它再次使用原生 ES6 模块

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

I want to use Vue 3 without build and without CDN

self-hosting

unity3d

vue.js