在 Vert.x (w/ES4X) 上运行 Vuetify [英] Running Vuetify on Vert.x (w/ES4X)

问题描述

我想知道是否可以使用 Vert.x 运行 Vuetify(开箱即用).我已经玩了一段时间，我没有看到一个简单的方法，但也许我错过了一些东西.

I'm wondering if it's possible to run Vuetify (out-of-the-box) with Vert.x. I've played around a bit and I don't see a straightforward way but perhaps I'm missing something.

来源:

1. https://vuetifyjs.com/en/getting-started/quick-start
2. https://reactiverse.io/es4x/start/install

步骤:

创建一个开箱即用的 Vuetify:

Create an out-of-the-box Vuetify:

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

通过在 Node 中运行来测试它是否有效

Test that it works by running it in Node

 npm run start

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

When I view http://localhost:8080 (using node) it looks good. So I create a compiled version in a dist folder

 npm run build

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

Now I would like to try and get it working in Vert.x So I add ES4X, which is supposed to allow ES 5+ js code

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 文件，为 index.html 创建一个 vert.x 服务器

Create an index.js file so vert.x server for the index.html

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

运行 Vert.x

npm start

当我查看 http://localhost:8080 时，它没有按预期显示.它看起来像一个空白页.当我在浏览器中查看页面的源代码时，它显示了 index.html 文件的内容.所以我知道它正在加载它，只是没有解释它.当我查看控制台时，我看到一个日志条目说 Syntax error: Expected expression, got '<'

When I view http://localhost:8080 it does not show as expected. It looks like a blank page. When I view the source code of the page in a browser, it shows the contents of the index.html file. So I know it's loading it, just not interpreting it. When I view the console I see a log entry saying Syntax error: Expected expression, got '<'

注意 - 我想避免使用 Vuetify 快速启动链接上显示的CDN 安装"路线.我的项目相当复杂，我只是想在绑定所有其他依赖项之前测试 Vuetify 本身如何与 Vert.x 一起工作

Note - I would like to avoid going the 'CDN install' route shown on the Vuetify quick-start link. My project is fairly complex and I just wanted to test how Vuetify by itself worked with Vert.x before tying in all the other dependencies

推荐答案

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

You've added a bare request handler, think of it as using just core nodejs modules. In order to serve multiple files and resources you should use vertx-web (which you already installed). In this case your code should be:

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);

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

So now all your static files should be served correctly...

这篇关于在 Vert.x (w/ES4X) 上运行 Vuetify的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！