在ASP.NET Core中托管Vue：另一种方式

最新推荐文章于 2024-06-12 11:58:02 发布

lwplvx

最新推荐文章于 2024-06-12 11:58:02 发布

阅读量929

点赞数

分类专栏： dotnetcore nodejs vue 文章标签： vue dotnetcore node.js

原文链接：http://wildermuth.com/2020/09/13/Hosting-Vue-in-ASP-NET-Core-A-Different-Take

版权

vue 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

dotnetcore

5 篇文章 0 订阅

订阅专栏

nodejs

5 篇文章 0 订阅

订阅专栏

http://wildermuth.com/2020/09/13/Hosting-Vue-in-ASP-NET-Core-A-Different-Take

一些是 google 自动翻译的，个别地方比较生硬……。

在开发和教授Vue的几年中，我尝试了许多不同的方法来使ASP.NET Core和Vue相互配合。我看到的采用的策略之一（尤其是Angular和React）是Microsoft的Spa框架扩展。因为Vue并非开箱即用（或没有模板），所以很长一段时间我都拒绝了这种方法。平台已经成熟，并且有Vue的开源扩展，

我以为我会重新审视它。尽管我仍然认为这不是正确的方法。让我们看看为什么。

Vue CLI中间件项目的方法

最初，我认为解决方法是将其单独处理。这意味着可以使用VS Code或仅使用命令行来运行项目来打开它。我想要更集成的东西，我想我找到了我不介意的解决方案。

让我们来看一个例子。Vue CLI中间件项目（https://github.com/EEParker/aspnetcore-vueclimiddleware）提供了Vue特定的方式来使用Vue CLI托管项目（通过SpaServices扩展），从而使其神奇地发生。

GitHub项目中有一个示例说明了它如何工作：

https://github.com/EEParker/aspnetcore-vueclimiddleware/tree/master/samples/VueCliSample

这种方法的真正问题在于，它希望您的项目将是一个单页应用程序（而不是一个以上的应用程序），并且将为Vue项目添加要使用的API调用。众所周知，我更喜欢使用少量应用程序/页面的想法，而不是一个庞大的Vue应用程序。

在运行时，中间件正在运行“ serve”命令，该命令不仅为项目提供服务，而且还监视更改并支持热模块重新加载：

<span style="color:#000000"><code class="language-c">endpoints<span style="color:#5f6364">.</span><span style="color:#2f9c0a">MapToVueCliProxy</span><span style="color:#5f6364">(</span>
    <span style="color:#2f9c0a">"{*path}"</span><span style="color:#5f6364">,</span>
    new SpaOptions <span style="color:#5f6364">{</span> SourcePath <span style="color:#a67f59">=</span> <span style="color:#2f9c0a">"ClientApp"</span> <span style="color:#5f6364">}</span><span style="color:#5f6364">,</span>
    npmScript<span style="color:#a67f59">:</span> <span style="color:#5f6364">(</span>System<span style="color:#5f6364">.</span>Diagnostics<span style="color:#5f6364">.</span>Debugger<span style="color:#5f6364">.</span>IsAttached<span style="color:#5f6364">)</span> <span style="color:#a67f59">?</span> <span style="color:#2f9c0a">"serve"</span> <span style="color:#a67f59">:</span> null<span style="color:#5f6364">,</span>
    regex<span style="color:#a67f59">:</span> <span style="color:#2f9c0a">"Compiled successfully"</span><span style="color:#5f6364">,</span>
    forceKill<span style="color:#a67f59">:</span> true
    <span style="color:#5f6364">)</span><span style="color:#5f6364">;</span>
</code></span>

这可以工作，但是同样，它仅假设一个应用程序（并假设您将最终的项目托管在纯HTML文件中，而不是MVC或Razor Pages中）。我想要更多的灵活性。

对我来说，另一个争执是它使用扩展名将项目指向Vue项目（深层嵌套）的/ dist文件夹。例如，您配置结果文件夹在哪里：

<span style="color:#000000"><code class="language-c">services<span style="color:#5f6364">.</span><span style="color:#2f9c0a">AddSpaStaticFiles</span><span style="color:#5f6364">(</span>opt <span style="color:#a67f59">=</span><span style="color:#a67f59">></span> opt<span style="color:#5f6364">.</span>RootPath <span style="color:#a67f59">=</span> <span style="color:#2f9c0a">"ClientApp/dist"</span><span style="color:#5f6364">)</span><span style="color:#5f6364">;</span>
</code></span>

我喜欢这个项目，但不喜欢这种方法。让我们看看我的变化。

使用Vue CLI中间件项目：我的方式

在添加中间件之前，首先需要对Vue项目进行一些小的更改。第一个更改是我将vue.config.js文件添加到Vue项目。这样做的唯一目的是将内部版本的输出重定向到ASP.NET Core项目：

<span style="color:#000000"><code class="language-javascript">module<span style="color:#5f6364">.</span>exports <span style="color:#a67f59">=</span> <span style="color:#5f6364">{</span>
  <span style="color:#7d8b99">// Put this in the ASP.NET Core directory</span>
  outputDir<span style="color:#a67f59">:</span> <span style="color:#2f9c0a">"../wwwroot/app"</span> 
<span style="color:#5f6364">}</span><span style="color:#5f6364">;</span>
</code></span>

另一个更改是将新脚本添加到project.json文件，以使我们能够在开发模式下构建项目并观察更改：

<span style="color:#000000"><code class="language-json">  <span style="color:#c92c2c">"scripts"</span><span style="color:#a67f59">:</span> <span style="color:#5f6364">{</span>
    <span style="color:#c92c2c">"serve"</span><span style="color:#a67f59">:</span> <span style="color:#2f9c0a">"vue-cli-service serve"</span><span style="color:#5f6364">,</span>
    <span style="color:#c92c2c">"build"</span><span style="color:#a67f59">:</span> <span style="color:#2f9c0a">"vue-cli-service build"</span><span style="color:#5f6364">,</span>
    <span style="color:#c92c2c">"lint"</span><span style="color:#a67f59">:</span> <span style="color:#2f9c0a">"vue-cli-service lint"</span><span style="color:#5f6364">,</span>
    <span style="color:#c92c2c">"watch"</span><span style="color:#a67f59">:</span> <span style="color:#2f9c0a">"vue-cli-service build --mode development --watch"</span>
  <span style="color:#5f6364">}</span><span style="color:#5f6364">,</span>
</code></span>

监视脚本将用于构建整个项目（同样，将其构建到wwwroot文件夹中），并在每次发生更改时重新构建。这类似于serve命令，但是它并不期望我们仅使用index.html来承载我们的Vue项目。随着我们使用多个项目，这一点变得越来越重要，我们将很快看到。

相反，我首先将引用导入到项目中：

添加中间件

我可以以最小的侵入性来代替添加中间件以指向Vue项目的dist文件夹，而只需添加中间件端点（谁的真正工作是运行并观看Vue CLI的构建）：

<span style="color:#000000"><code class="language-c">      app<span style="color:#5f6364">.</span><span style="color:#2f9c0a">UseEndpoints</span><span style="color:#5f6364">(</span>endpoints <span style="color:#a67f59">=</span><span style="color:#a67f59">></span>
      <span style="color:#5f6364">{</span>
        endpoints<span style="color:#5f6364">.</span><span style="color:#2f9c0a">MapRazorPages</span><span style="color:#5f6364">(</span><span style="color:#5f6364">)</span><span style="color:#5f6364">;</span>
        endpoints<span style="color:#5f6364">.</span><span style="color:#2f9c0a">MapControllers</span><span style="color:#5f6364">(</span><span style="color:#5f6364">)</span><span style="color:#5f6364">;</span>

        <span style="color:#7d8b99">// Only do for development</span>
        <span style="color:#1990b8">if</span> <span style="color:#5f6364">(</span>env<span style="color:#5f6364">.</span><span style="color:#2f9c0a">IsDevelopment</span><span style="color:#5f6364">(</span><span style="color:#5f6364">)</span><span style="color:#5f6364">)</span>
        <span style="color:#5f6364">{</span>
          endpoints<span style="color:#5f6364">.</span><span style="color:#2f9c0a">MapToVueCliProxy</span><span style="color:#5f6364">(</span>
            <span style="color:#2f9c0a">"{*path}"</span><span style="color:#5f6364">,</span>
            new SpaOptions
            <span style="color:#5f6364">{</span>
              SourcePath <span style="color:#a67f59">=</span> <span style="color:#2f9c0a">"client"</span>
            <span style="color:#5f6364">}</span><span style="color:#5f6364">,</span>
            npmScript<span style="color:#a67f59">:</span> <span style="color:#2f9c0a">"watch"</span><span style="color:#5f6364">,</span>
            regex<span style="color:#a67f59">:</span> <span style="color:#2f9c0a">"Compiled successfully"</span><span style="color:#5f6364">,</span>
            forceKill<span style="color:#a67f59">:</span> true
            <span style="color:#5f6364">)</span><span style="color:#5f6364">;</span>
        <span style="color:#5f6364">}</span>
      <span style="color:#5f6364">}</span><span style="color:#5f6364">)</span><span style="color:#5f6364">;</span>
</code></span>

这意味着我在开发过程中只使用了中间件。请注意，npmScript是新手表，而不是serve。我之所以这样做，是因为我想在自己的页面上测试Vue应用。

例如，在我的示例中，我只是将Vue代码放在index.cshtml页面（Razor页面）上：

<span style="color:#000000"><code class="language-cshtml">@page
@model IndexModel
@{
  ViewData["Title"] = "Home page";
}
@section Scripts {
  <script src="~/app/js/chunk-vendors.js"></script>
  <script src="~/app/js/index.js"></script>
}
<div id="app"></div>
</code></span>

这给了我两件事。第一，我在“剃刀页面”（或MVC）中使用“布局”页面来负责布局和菜单（如果适用）。这也意味着，如果我在不使用Vue的某些页面上使用某些框架（例如Bootstrap），则可以继续在我的Vue视图中使用它们，因为我只是在Razor页面中。

支持多个Vue“页面”

我也喜欢这种方法，因为它鼓励我不仅构建单个Vue整体项目，而且还允许我使用Vue CLI对页面的支持。请参阅vue.config.js的页面配置：

<span style="color:#000000"><code class="language-javascript">module<span style="color:#5f6364">.</span>exports <span style="color:#a67f59">=</span> <span style="color:#5f6364">{</span>
  <span style="color:#7d8b99">// Put this in the ASP.NET Core directory</span>
  outputDir<span style="color:#a67f59">:</span> <span style="color:#2f9c0a">"../wwwroot/app"</span><span style="color:#5f6364">,</span>
  pages<span style="color:#a67f59">:</span> <span style="color:#5f6364">{</span>
    index<span style="color:#a67f59">:</span> <span style="color:#2f9c0a">"src/main.js"</span><span style="color:#5f6364">,</span>
    contact<span style="color:#a67f59">:</span> <span style="color:#2f9c0a">"src/contact.js"</span>
  <span style="color:#5f6364">}</span>
<span style="color:#5f6364">}</span><span style="color:#5f6364">;</span>
</code></span>

在这种情况下，我将构建两个单独的Vue项目（通过具有单独的启动文件），以便可以构建较小的离散Vue项目。因为他们在同一个项目中，所以他们可以共享所有代码。这样，我可以有一个单独的Contact页面Vue项目，其中Contact.cshtml只是托管contact Vue项目：

<span style="color:#000000"><code class="language-cshtml">@page
@model ContactModel
@{
  ViewData["Title"] = "Contact";
}
@section Scripts {
  <script src="~/app/js/chunk-vendors.js"></script>
  <script src="~/app/js/contact.js"></script>
}
<div id="contact"></div>
</code></span>

最后的想法

中间件并非完全出于此目的而编写的。我可能会执行拉取请求，默认情况下会阻止我实际提供index.html，因为我没有使用它，如果该文件不存在，它将引发错误。（例如，确保您的页面之一仍称为索引）。

您如何看待这种方法？我喜欢它，因为在生产中根本没有中间件。仅仅是Razor Pages（或MVC）将Vue项目作为.js文件提供。它确实需要我们修改构建脚本，以确保在构建CI构建时确保已安装Node和Vue CLI。但这不是IMO的大问题。

您可以在GitHub中找到示例：

https://github.com/shawnwildermuth/VueInCore

关于如何改善这一点有什么想法吗？

lwplvx

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在ASP.NET Core中托管Vue：另一种方式

http://wildermuth.com/2020/09/13/Hosting-Vue-in-ASP-NET-Core-A-Different-Take一些是 google 自动翻译的，个别地方比较生硬……。在开发和教授Vue的几年中，我尝试了许多不同的方法来使ASP.NET Core和Vue相互配合。我看到的采用的策略之一（尤其是Angular和React）是Microsoft的Spa框架扩展。因为Vue并非开箱即用（或没有模板），所以很长一段时间我都拒绝了这种方法。平台已经成熟，并且有V.
复制链接

扫一扫

专栏目录