运行 Vuetify Vert.x (w/ES4X)

Question

我想知道是否可以运行使用 Vert.x Vuetify（开箱即用）。我玩了一会儿，我没有看到一个简单的方法，但也许我遗漏了一些东西。

来源：

步骤：

创建开箱即用的 Vuetify：

 npm install @vue/cli -g
 vue create my-app
 cd my-app
 vue add vuetify

通过运行在 Node

中安装它来测试它是否工作

 npm run start

当我查看 http://localhost:8080（使用节点）时，它看起来不错。所以我在 dist 文件夹中创建编译版本

 npm run build

现在我想尝试让它在 Vert.x 中工作所以我添加了 ES4X，它应该允许 ES 5+ js 代码

npm install -g es4x-pm
es4x init
npm install @vertx/unit --save-dev
npm install @vertx/core --save-prod
npm install @vertx/web --save-prod
npm install

创建一个 index.js 文件，以便 vert.x 服务器用于 index.html

vertx.createHttpServer().requestHandler(function (req){
  req.response().sendFile("dist/index.html");
}).listen(8080);

运行 Vert.x

npm start

当我查看 http://localhost:8080 时，它没有按预期显示。它看起来像一个空白页。当我在浏览器中查看页面的源代码时，它显示了 index.html 文件的内容。所以我知道它正在加载它，只是不解释它。当我查看控制台时，我看到一个日志条目，上面写着语法错误：预期的表达式，得到 '<'

注意 - 我想避免走 Vuetify 快速启动 link 上显示的 'CDN install' 路线。我的项目相当复杂，我只是想测试 Vuetify 本身如何与 Vert.x 一起工作，然后再绑定所有其他依赖项

Answer 1

您添加了一个简单的请求处理程序，将其视为仅使用核心 nodejs 模块。为了提供多个文件和资源，您应该使用 vertx-web（您已经安装）。在这种情况下，您的代码应该是：

import { Router, StaticHandler } from '@vertx/web';

// router acts like express if you're familiar with it
const app = Router.router(vertx);

// for any HTTP GET request this will be your
// first handler "dist" is your static files root dir
app.get().handler(StaticHandler.create("dist"));
// add more handlers as needed...

vertx.createHttpServer()
  .requestHandler(app)
  .listen(8080);

所以现在您的所有静态文件都应该正确提供...

Answer 2

不确定我是否在摸索这个问题。

Vuetify 运行在浏览器，Es4x 运行在服务器。

您只需要提供静态 'dist' 文件夹的方法，如上所述。

ps：我假设您没有进行 server-side 渲染，在这种情况下，我不确定 es4x 是否会工作（可能）。

运行 Vuetify Vert.x (w/ES4X)

Running Vuetify on Vert.x (w/ES4X)

vue.js

vuetify.js

vert.x