在 Laravel 项目中使用 Vuepress

Question

我实际上运行正在创建一个 Laravel 网站，我想在其中运行 Vuepress 文档部分。

根据说明安装 Vuepress 非常简单，开发服务器也是如此。

但是，在将其集成为静态站点时，我有点迷失了与 Laravel 的交互。

我的所有文档都位于我的 Laravel 应用程序根目录下的 docs 文件夹中。

我设法设置了 Vuepress' config.js 以将静态站点构建到另一个文件夹中。

base: '/docs/',
dest:'./public/docs',

执行上述操作，将文档完全暴露给网络（在 public 文件夹中）。

然而，我正在寻找的是将它更精确地集成到 Laravel 中（使用我创建的中间件和路由）。

Answer 1

方法一

1。在 laravel 目录

的 /docs 中安装 vuepress

2。使用正确的 `base` 和 `dest`

配置 vuepress

/docs/.vuepress/config.js

module.exports = {
  dest: 'public/docs',
  base: 'docs/',
};

3。启用 laravel 视图以包含来自 `/public` 目录

的文件

/app/config/view.php

...
'paths' => [
    resource_path('views'),
    base_path('public'), // now blade's @include will also look in /public
],
...

4。为 vuepress 创建一个允许 `.html` extension

的 laravel 路由

/routes/web.php

use View;
Route::get('/docs', function() {
  View::addExtension('html', 'php'); // allows .html
  return view('docs.index'); // loads /public/docs/index.html
});

方法二

或通过 Laravel 对资产进行更多控制，您可以在此处尝试此教程：https://serversideup.net/vuepress-within-a-laravel-application/

Answer 2

# install as a local dependency
yarn add -D vuepress # OR npm install -D vuepress

# create a docs directory
mkdir docs

# create a markdown file
echo '# Hello VuePress' > docs/README.md

package.json

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

/docs/.vuepress/config.js

module.exports = {
  dest: 'public/docs',
  base: '/docs/',
};

npm run docs:build

/routes/web.php

Route::get('/docs', function() {
    return File::get(public_path() . '/docs/index.html');
});

在 Laravel 项目中使用 Vuepress

Using Vuepress within a Laravel project

laravel

vuepress

方法一

1。在 laravel 目录

2。使用正确的 base 和 dest

3。启用 laravel 视图以包含来自 /public 目录

4。为 vuepress 创建一个允许 .html extension

方法二

2。使用正确的 `base` 和 `dest`

3。启用 laravel 视图以包含来自 `/public` 目录

4。为 vuepress 创建一个允许 `.html` extension