./monolith 网站地址 > xxx.html

SP.NET Core 支持直接向客户端提供静态文件，比如：Html文件，图片，js文件，为了能够让 ASP.NET Core 处理静态文件，需要使用 静态文件中间件 并做一些必要配置就可以了，这篇文章我们就来一起讨论下。

安装 静态文件中间件

要想安装 静态文件中间件,必须将 Microsoft.AspNetCore.StaticFiles 添加到 ASP.NET Core 的请求管道中，可以使用 Visual Studio 2019 中的 NuGet package manager 可视化界面，要么用 NuGet package manager console 在命令行窗口中键入如下命令。

dotnet add package Microsoft.AspNetCore.Rewrite

基础信息配置

下面的代码展示了在 Startup 中如何对 静态文件中间件 进行配置。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
   app.UseStaticFiles();
   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
            endpoints.MapRazorPages();
   });
}

ASP.NET Core 中处理 静态文件

静态文件都是统一配置在 wwwroot 文件夹下, 可以看到 wwwroot文件夹下还有 css，images，js 等文件夹，值得注意的是这些文件夹之间可以采用相对路径进行访问。

如果 静态文件中间件 已经成功配置好，接下来可以使用下面的路径访问 test.png 图片。

http://localhost:44399/images/test.png

如果大家心思细腻的话就会发现，当我不想用 wwwroot 来承载这些静态文件的话，该怎么做呢？ 换句话说，我怎么去处理在 wwwroot 文件夹之外的静态文件呢？ 下面的代码片段展示了如何去配置。

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.UseStaticFiles();

    app.UseStaticFiles(new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(),@"IDGStaticFiles")),
        RequestPath = new PathString("/StaticFiles")
    });
}

启用 目录浏览

一般web程序中都会提供一个叫做 目录浏览 的功能，它允许用户浏览一个指定文件夹下的所有文件和文件夹，但通常为了安全考虑，这个功能默认都是关闭状态，如果你有开启的需求，可以使用 UseDirectoryBrowser 扩展方法在 Configure 下进行配置，下面的代码片段展示了如何开启 目录浏览。

    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDirectoryBrowser();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseStaticFiles();

            app.UseStaticFiles(new StaticFileOptions()
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot")),
                RequestPath = new PathString("/IDGImages")
            });

            app.UseDirectoryBrowser(new DirectoryBrowserOptions()
            {
                FileProvider = new PhysicalFileProvider(
              Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot\images")),
                RequestPath = new PathString("/IDGImages")
            });
        }
    }

然后把程序跑起来并在 url 中指定 IDGImages 路径，你将会看到 wwwroot\images 文件夹下的所有内容。

保护文件安全

从前面的例子中可以看到，wwwroot 中的这些文件都是公开可访问的，但很多时候想在某些文件上做一些授权处理，如果要这么做的话，有两种方式可以实现。

• 将需要保护的文件从 wwwroot 移到单独的文件夹中。

• 利用 Action 来处理文件，并返回 FileResult 的方式。

处理默认页面

最后，你可以利用 UseDefaultFiles 扩展方法来提供一个 web程序的 默认页面，下面的代码配置展示了如何配置。

public void Configure(IApplicationBuilder app)
{
    app.UseDefaultFiles();
    app.UseStaticFiles();
}

值得注意的是，如果你的web程序中需要有 静态文件,默认文件,目录浏览 三项功能的话，可以直接使用 UseFileServer 扩展方法，下面的代码片段展示了如何在 Configure 方法中进行配置。

app.UseFileServer(enableDirectoryBrowsing: true);

译文链接：https://www.infoworld.com/article/3446957/how-to-work-with-static-files-in-aspnet-core.html

Umi3官方文档中，有一个配置项exportStatic需在配置文件（umirc.ts或config/config.ts）中设置，语法如下：

exportStatic
   Type: object

此配置项有三个参数，规范如下：
1. htmlSuffix：启用.html 后缀。
2. dynamicRoot：部署到任意路径。
3. extraRoutePaths：生成额外的路径页面，用法和场景见预渲染动态路由

Umi框架配置 html 的输出形式，默认只输出 index.html。如果需要预渲染，请开启 ssr 配置，常用来解决没有服务端情况下，页面的 SEO 和首屏渲染提速。如果开启 exportStatic，则会针对每个路由输出 html 文件。

举个例子，路由配置如下：

/
/users
/list

在不开启 exportStatic 时，输出：

- index.html

设置 exportStatic: {} 后，输出：

- index.html
- users/index.html
- list/index.html

设置 exportStatic: { htmlSuffix: true } 后，输出：

- index.html
- users.html
- list.html

若有 SEO的话需求，可开启 ssr 配置，在 umi build 后，会路由（除静态路由外）渲染成有具体内容的静态 html 页面，例如在配置文件（umirc.ts | config/config.ts）中有如下路由配置：

{

  routes: [

    {

      path: '/',

      component: '@/layouts/Layout',

      routes: [

        { path: '/', component: '@/pages/Index' },

        { path: '/bar', component: '@/pages/Bar' },

        { path: '/news', component: '@/pages/News' },

        { path: '/news/:id', component: '@/pages/NewsDetail' },

      ],

    },

  ];

}

设置 { ssr: {}, exportStatic: { } 后，且在编译后，生成如下产物：

- dist

  - umi.js
  - umi.css
  - index.html

  - bar
    - index.html

  - news
    - index.html
    - [id].html

考虑到预渲染后，大部分不会再用到 umi.server.js 服务端文件，构建完成后会删掉 umi.server.js  文件如果有调试、不删除 server 文件需求，可通过环境变量 RM_SERVER_FILE=none 来保留。

转载：码书网「链接」