非单页应用多页面应用上使用asp.net-core 2.1带有Razor + vue+ webpack。

要在ASP.NET Core 2.1中使用Razor + Vue + webpack来构建非单页多页面应用，你可以按照以下步骤进行操作：

步骤1：创建一个新的ASP.NET Core 2.1项目

首先，创建一个新的ASP.NET Core 2.1项目。你可以使用Visual Studio或者通过命令行创建项目。

步骤2：安装必要的NuGet包

在新创建的项目中，安装以下NuGet包：

Microsoft.AspNetCore.SpaServices.Extensions Microsoft.AspNetCore.NodeServices

步骤3：创建Vue项目

使用Vue CLI创建一个新的Vue项目。在命令行中运行以下命令：

vue create vue-app

这将创建一个名为"vue-app"的新Vue项目。

步骤4：配置webpack

进入Vue项目的根目录，找到webpack.config.js文件。在该文件中，添加以下配置：

module.exports = { // ... output: { // ... library: '[name]', libraryTarget: 'umd', umdNamedDefine: true } };

步骤5：添加ASP.NET Core Razor页面

在ASP.NET Core项目中，添加一个Razor页面（例如，Index.cshtml）。在该页面中，添加以下代码：

@{ ViewData["Title"] = "Home Page"; }

<h2>@ViewData["Title"]</h2>

@section Scripts { <script src="~/dist/vue-app.js"></script> }

步骤6：将Vue项目构建为UMD库

在Vue项目的根目录中，运行以下命令，将Vue项目构建为UMD库：

npm run build

这将在Vue项目的dist目录中生成vue-app.js文件。

步骤7：在ASP.NET Core项目中使用Vue组件

在ASP.NET Core Razor页面中，使用Vue组件。例如，在Index.cshtml页面中，添加以下代码：

<my-vue-component></my-vue-component>

步骤8：创建Vue组件

在Vue项目的src目录中，创建一个Vue组件。例如，创建一个名为MyVueComponent.vue的文件，添加以下代码：

<template> <div> <h3>Hello from Vue component!</h3> </div> </template>

<script> export default { name: 'my-vue-component' } </script>

步骤9：在ASP.NET Core项目中注册Vue组件

在ASP.NET Core项目的Startup.cs文件中，添加以下代码：

public void ConfigureServices(IServiceCollection services) { services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

services.AddNodeServices();

// ...

}

步骤10：在ASP.NET Core项目中使用Vue组件

在ASP.NET Core Razor页面中，使用Vue组件。例如，添加以下代码：

@section Scripts { <script src="~/dist/vue-app.js"></script> <script> new Vue({ el: '#app', components: { 'my-vue-component': window['vue-app'].MyVueComponent } }); </script> }

现在，你就可以在非单页多页面应用中使用ASP.NET Core 2.1 + Razor + Vue + webpack了。通过在ASP.NET Core Razor页面中使用Vue组件，你可以在每个页面上使用Vue.js的功能。