Lavas 2.0 新增功能 | Lavas
webpack 相关
webpack 相关
Lavas 2.0 新增功能Lavas 2.0 提供了更加强大和便捷的功能，让我们来了解一下：服务端渲染 (SSR) 和浏览器端渲染 (SPA) 可以快速切换Lavas 2.0 支持通过配置项快速修改和切换。开发者需要修改的(在开发状态下)仅仅是配置项中的一个 boolean 值而已。提示：采用浏览器端渲染时，构建后所有页面都会由统一的入口 index.html 进行渲染。因此实质就是单页应用 (SPA)。因此在 Lavas 教程中，SPA = 单页应用 = 浏览器端渲染模式。自动生成路由规则，避免重复代码一般情况我们除了编写页面，还需要指明每个页面的访问路由规则。但实际上在大部分情况下页面的文件夹路径和路由规则是存在对应关系的。何不由系统自动生成路由，解决这大部分的工作呢？Lavas 会根据每个页面在目录中的路径位置，生成对应的路由规则，具体可以参考 。当然如果自动生成的路由规则无法满足开发者的需求，也可以通过配置进行重写，可以参考针对 SSR 提供了更加合理的 AppShell 支持，享受更加顺滑和健壮的浏览体验SSR 没有独立的 HTML 文件生成，因此也不能加入 Skeleton 实现骨架屏。对此情况，Lavas 升级了 SSR 模式下的 App Shell，配合 Service Worker 可以实现和骨架屏类似的效果。详细介绍可以参考 为了开发者快速上手，我们还提供了一些
帮助开发者熟悉 Lavas 2.0 的各种特性，您可以选择适合自己的教程并按照步骤逐步学习。如果您从未接触过 Lavas 2.0，我们推荐您先从开始。
这篇文章对您有帮助吗？
thumb_down路由配置项 | LavasLavas 安装和项目构建
了解了lavas基础之后，下面我们就需要创建一个基础的lavas项目了。环境要求一台可以正常联网的计算机并已安装较新版本的 Node.js (≥ 6.9) 和 npm (≥ 3.0)一个方便调试并支持 Service Worker 的浏览器，推荐使用 Google Chrome一个自己习惯的文本编辑器，如 Sublime Text, Web Storm 等等安装步骤安装/升级 Lavas 命令行工具1npm install lavas -g在合适的目录新建项目并命名（此处有坑，在文章后面再说）1lavas init进入目录并安装依赖1npm install启动开发服务器，访问 localhost:3000 将看到初始页面。1lavas dev
之前第2步的时候也说了，此处有坑，现在就来说一下，我刚开始接触Lavas时，根据官方文档一步步创建项目，全局安装完Lavas之后，查看lavas版本到此为止，安装成功。开始创建项目，执行第二步操作，发现提示和图例不同，显示报错（一脸懵逼，出师未捷身先死啊），各种查阅，但是并没有什么有用的信息，突然灵光一闪（在其他地方遇到过类似问题），第一步只是全局安装成功，需要退出再次启动终端才可以继续执行项目的创建，（不管如何，试一下了），成功了，至此这个非常简单的坑，填了。初始目录结构通过 lavas init 初始化项目完成之后，我们应该能够看到如下的文件结构：12345678910111213lavas-project├── assets/├── components/├── core/├── middlewares/├── node_modules/├── pages/├── static/├── store/├── lavas.config.js├── server.dev.js, server.prod.js├── .babelrc, .editorconfig, .fecsignore, .fecsrc, .gitignore└── LINCENSE, package.json, README.mdassets, static把这两个目录放在一起，是因为这两个目录都是存放外部静态资源的，例如 (用字体实现矢量小图标的库), icons(用于添加到手机桌面时使用的各种尺寸的图标), manifest.json(同样用于添加到桌面时使用)等。这些静态资源在构建时会一并被放入生成目录中(/dist)，但两者也有差别：/assets 里的内容会被 webpack 构建到生成目录的文件中，不再会单独以文件形式存在。因此 iconfont 放置在 /assets中/static 里的内容会被原样复制到生成目录中，会以独立的文件形式存在。因此 PWA 用到的 manifest.json 和一系列图标等都放置在 /static 中。components/components 存放 Vue 的组件，供其他页面复用。在 Lavas 中，初始状态下提供了三个组件，均在一些页面框架中使用，因此会作用于整个项目的所有页面。UpdateToast.vue 也在 /core/App.vue 中被引用，用于 Service Worker 更新时提示用户ProgressBar.vue 在 /core/entry-client.js 中被引用，在页面切换时在顶部展示加载的进度条如果开发者有其他多个页面需要复用的组件，也可以放在 /components 目录中。core/core 目录中存放一些散落但必须的文件，作用也相对复杂，包括 webpack entry, 全局样式框架，Vue app 启动器等等。详细可以参考
进行详细查看。middlewares之前在 /core/middlewares.js 中有提过，用户可以在这个目录编写自定义中间件，用来获取或者修改每次到达服务器的网络请求。关于中间件的具体写法及其包含的能力可以参考。pages/pages/ 目录存放每个页面的 vue 组件。我们在开发实际站点的时候，可能大部分的工作都在这个目录中进行。每个页面组件都是一个标准的 Vue 组件，包含 &template&, &script& 和 &style& 三部分，开发方式也和 Vue 一模一样，这里就不再多做介绍了。值得注意的是，/pages/ 目录中的所有页面都会自动生成一条路由规则，无需用户再行配置。举例来说，在初始项目中我们看到一个 /pages/Appshell.vue，则 Lavas 自动生成的路由将会是 /appshell。更多生成规则可以参考本文下半部分的“ Lavas 自动路由生成方法” 部分。当然如果开发者对自动生成的路由并不满意，或者有其他特殊需求需要自定义路由规则的，也可以通过 router 配置项进行修改，这部分将在进行说明。store之前在 /core/store.js 中有提及，所有位于 /store 目录的 js 文件都会以 Vuex 模块 (module) 进行加载。因此开发者只需要提供一个完整的 Vuex 模块就可以在 vue 中使用它。一般来说，一个完整的 Vuex 模块需要包含以下内容：1234567891011121314export const state = () =& {
};export const mutations = {
};export const actions = {
};这样就可以在 /pages/ 目录中的 vue 中使用它了，例如123456computed: mapState('namespace/someStore', [
'state2'])更多 store 相关的写法可以参见。lavas.config.jsLavas 提供了许多配置项，方便开发者进行各种自定义的灵活配置。所有的配置项都集中在 lavas.config.js 中，并提供一套默认配置，适用于大部分普通开发者快速上手。配置总共分为以下几个部分，您都可以在文档的进阶部分找到对应的章节进行详述：build 构建相关，详见errorHandler 错误处理相关，详见middleware 中间件相关，详见router 路由规则相关，详见serviceWorker Service Worker 相关，详见 在此，再次提醒一下，Lavas并不是一个新的框架，而是VUE和PWA的结合体，一些基本的使用和项目的构建和VUE是大致相同的，如果你有VUE的基础，再加上熟悉一下PWA的原理和技术，入手会更简单。
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！如何使用 Lavas 构建 MPA 项目 | Lavas
webpack 相关
webpack 相关
如何使用 Lavas 构建 MPA 项目Lavas 目前支持两种渲染模式，分别是服务端渲染 (SSR) 和 浏览器端渲染。 而浏览器端渲染时，整个项目构建完成后只有一个 HTML 入口 index.html，因此这时本质上等价于单页应用，即 SPA。从小型站点的开发需求来说，SPA 和 SSR 已经能够覆盖绝大部分。让我们更进一步，考虑如下两种情况：整个站点的一部分需要使用 SSR 模式渲染，另一部分使用 SPA 模式渲染。整个站点均为浏览器端渲染，但存在多个入口 HTML，即多页应用 (MPA)。如何使用 Lavas 来满足此类需求呢？解决思路我们可以把 Lavas 项目看做一个单独的单元，或称入口。对于上述两种情况，都可以认为由多个入口组成：情况 1，相当于一些入口采用 SSR 模式，另一些入口采用 SPA 模式情况 2，相当于项目中存在多个 SPA 模式的入口因此，我们把问题归结为：多个 Lavas 项目如何整合到一起？在 Lavas 构建完成后，SPA 项目本质上是一些静态页面，包含一个入口 index.html 和其他静态资源；SSR 项目本质上是一个 express (也可以是 koa )中间件。因此通过架设一个 express 服务器可以很方便分别对两者进行整合。实现方式为了表述方便，我们来创建一个简单但可能很实用的需求，通过解决这个需求来学习如何整合。示例需求我们假设开发者存在这样的开发需求：一个电商站点从业务模块角度能分成两部分，分别是：/user/* 部分，用户信息浏览/注册/修改等等相关，采用 SPA 模式渲染。一般这类用户信息敏感的内容不需要考虑 SEO，也就不需要 SSR。剩余部分，是站点的主要内容，例如 / 展示站点首页，/detail/* 查看商品详情，/search/* 进行商品搜索等等。这部分考虑到 SEO 需求，使用 SSR 模式进行渲染。我们假设开发者已经分别为两者开发了单独的 Lavas 应用。前者名为 lavas-user，后者名为 lavas-main。我们需要这么几个步骤：修改基础路由互相区分提取共享模块避免重复 (可选)配置服务器构建修改基础路由观察示例需求的两个模块，lavas-user 拥有明显的 URL 特征 ( /user 开头)，而 lavas-main 没有。因此我们修改 lavas-user 的 base，lavas-main 不作修改。打开 lavas-user/lavas.config.js 配置文件的build 段的 publicPath 以及 router 段的 base，均修改为 /user/ (不要遗漏最后的 / ！)，如下：12345678910111213
publicPath: '/user/'
mode: 'history',
base: '/user/',
pageTransition: {
enable: false
info base 配置项是 vue-router 的一个配置项，用以设定基准路由。修改后的 lavas-main，原本使用 /view 的路由就变成了 /user/view， 原本使用 /register 就变成了 /user/register，以此类推。 为了配合 base， 用以管理静态资源路径前缀的配置项 publicPath 也应做相同的修改，否则会导致系统找不到静态资源而报错。提取共享模块 (可选)如果 lavas-main 和 lavas-user 两个模块都引用了相同的内容，开发者又对重复代码无法接受，可以考虑将共同的代码抽离出来。举例来说，由 lavas init 初始化的项目都会有 /components 目录，里面会有共同使用的组件 (离线通知，Service Worker 更新通知和页面切换进度条)。如果要把这块提取出来的话，我们可以通过 webpack 的 alias 实现。123456789lavas-project
├── components/
├──OfflineToast.vue
├──UpdateToast.vue
└──ProgressBar.vue
├── lavas-user/
└──lavas.config.js
└── lavas-main/
└──lavas.config.jsLavas 为开发者提供了 alias 配置项()，修改 /lavas.config.js 即可。12345678
'common': path.resolve(__dirname, '../')
}将项目中使用到公共目录 components 中组件的地方改为以 common 开头 ，如下，如果我们将 UpdateToast 移到公共目录下1import UpdateToast from 'common/components/UpdateToast';除了 components，其他的公用内容也可以提出到公共目录，同样使用 common 为前缀来引用，非常方便，并且项目会清晰。配置服务器最后一步是在两个 Lavas 服务之前搭建一个分发服务器，对不同的 URL 转发到不同的 Lavas 服务。以 express 为例，我们新建 server.js，内容如下：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960const path = require('path');
const express = require('express');
const app = express();
const historyMiddleware = require('connect-history-api-fallback');
const LavasCore = require('lavas-core-vue');
const port = 8080;
function registerSPA(url, dirPath) {
if (url.endsWith('/')) {
url = url.substring(0, url.length - 1);
app.use('/', function (req, res, next) {
let requestUrl = req.url.replace(/\?.+?$/, '');
if (requestUrl === url) {
req.url = url + '/';
app.use(url, historyMiddleware({
htmlAcceptHeaders: ['text/html'],
disableDotRule: false
app.use(url, express.static(dirPath));
registerSPA('/user', 'lavas-user/dist');
let core = new LavasCore(path.resolve(__dirname, 'lavas-main/dist'));
core.init('production')
.then(() =& core.runAfterBuild())
.then(() =& {
app.use(core.expressMiddleware());
app.listen(port, () =& {
console.log('server started at localhost:' + port);
}).catch(err =& {
console.log(err);
process.on('unhandledRejection', (err, promise) =& {
console.log('in unhandledRejection');
console.log(err);
});文件中的所有项目文件路径(如 lavas-user/dist)以及启动端口号(如 8080)都可以根据项目实际情况进行修改。文件的上半部分对 SPA 进行处理，核心是把 /user 开头的路由转发到 lavas-user 的入口 lavas-user/dist/index.html 上。其中还涉及到一个 URL 结尾 / 的小问题，我们在进行叙述。SPA 部分的最后是启动 express 服务器并监听端口，但因为 SSR 部分包含异步操作，因此 如果项目包含 SSR 部分，则这里可以注释，由 SSR 部分负责启动。文件后半部分是对 SSR 进行处理，这部分和 lavas-main/server.prod.js 比较类似，就不再赘述了。构建分别对两个项目使用 lavas build 命令进行构建复制任意一个项目的 node_modules 目录到根目录，供上述 server.js 使用如果想精简项目内容，可以只将两个项目的 dist 目录移动出来，其余源码部分和 node_modules 都可以去除 (可选)最终目录结构如果按照文档上列出的 server.js 中的配置，最终目录应该如下：123456789101112131415lavas-project
├── lavas-user/
├── dist
├── index.html
└── something else (favicon.ico, lavas/, static/...)
└── something else (node_modules/, .lavas/, pages/, store/...)
├── lavas-main/
├── dist
├── server.prod.js
└── something else (lavas/, node_modules/, static/...)
└── something else (node_modules/, .lavas/, pages/, store/...)
├── node_modules/
└── server.js更进一步，精简后的代码结构可以是：1234567891011lavas-project
├── lavas-user-dist/
├── index.html
└── something else (favicon.ico, lavas/, static/...)
├── lavas-main-dist/
├── server.prod.js
└── something else (lavas/, node_modules/, static/...)
├── node_modules/
└── server.js这应该是上线需求的最小集合了，为了适应这样的修改，还需要对 server.js 中的引用路径进行改动，这里就不重复了。express 处理 SPA 路由的小问题 (扩展)提示：这部分内容由 Lavas 内部处理，并不需要开发者进行参与，仅仅作为解答开发者疑问的扩展阅读存在。在 server.js 中，我们能够发现存在一段代码：12345678910
app.use('/', function (req, res, next) {
let requestUrl = req.url.replace(/\?.+?$/, '');
if (requestUrl === url) {
req.url = url + '/';
});这段代码是用来处理一个 express 的路由问题的。Vue 官方推荐开发者在上线 Vue SPA 项目时使用 ，这个中间件的核心是修改 express 的 req.url，让我们看看如下代码(截取自该中间件)：1234rewriteTarget = options.index || '/index.html';
logger('Rewriting', req.method, req.url, 'to', rewriteTarget);
req.url = rewriteT
next();然后我们使用方式如下：1234app.use('/user', historyMiddleware({
htmlAcceptHeaders: ['text/html'],
disableDotRule: false
}))在这种配置下，当我们访问 /user/，经过中间件之后 req.url 会被设置为 /user/index.html，再进入 express.static，一切正常。但当访问 /user 时(没有后面那个 /)，经过中间件之后会变成 /userindex.html，这样是无法被 express.static 识别的，当然落到 SSR 之后也无法匹配，因此会报出 404 错误。因此我们在使用中间件之前还增加了一段修复代码，在访问 /user 的时候自动添加最后的 /。我们也考虑过 express 的 strict routing，但似乎也没法生效。如果开发者有更好的方法，欢迎告诉我们！
这篇文章对您有帮助吗？
thumb_down