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，该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快速入门链接上显示的“ CDN安装”路线。我的项目相当复杂，在绑定所有其他依赖项之前，我只想测试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：我假设您不进行服务器端渲染，在这种情况下，我不确定es4x是否可以工作（可能）。

在Vert.x（带有ES4X）上运行Vuetify

2 个答案: