Running Vuetify on Vert.x (w/ES4X)

问题

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.

Sources:

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

Steps:

Create an out-of-the-box Vuetify:

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

Test that it works by running it in Node

 npm run start

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

 npm run build

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

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

Run Vert.x

npm start

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 '<'

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

回答1:

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...

来源：https://stackoverflow.com/questions/56795793/running-vuetify-on-vert-x-w-es4x

标签

Vue.js

vuetify.js

vert.x