An ASP. NET core application runs Vue and is deployed on IIS in a detailed

This article mainly introduces you about how to run Vue in the ASP. NET core application and deployment on the relevant information on IIS, the text through the introduction of the very detailed, to everyone's study or work has a certain reference learning value, the need for friends below with the small series to learn together.

Objective

Starting with. NET Core 1.0, we've applied it to the project, but I haven't even begun to work on some of the principles of ASP. But there are a lot of articles in the garden, and we have some free time to talk about how to use ASP. Core combines Vue to run on IIS.

ASP. NET core with Vue deployed in IIS

about installing Vue and Webpack are no longer described, we directly create an ASP. NET core application or create an ASP. NET core application through dotnet new MVC

Next, under the above application, create the Vue template with the following command

Vue Init webpack my-projectcd my-projectnpm Install

Next we use NPM run dev to start the Vue.

At this point Vue is also running, and we can have a good local test. The first step was completed, and then we separated before and after the production environment, deploying the ASP. NET core application to IIS as a separate site, while Vue was also used as a separate site. Next we deploy the above application to IIS.

For site Aspnetcore created on IIS, the application pool in its basic settings is of course unmanaged code, and if not, download. NET Core Run time yourself.

What we need to do now is to modify the Vue configuration file and modify the Index.js file in the generated Vue Template Project Config folder to configure the directory where the generated files are located, as follows:

Next, run the NPM Run build command to generate the Vue file under the Wwwroot folder.

Then we create a front-end site to put the generated files above that site, for example, I created a vuedemo.

is not everything seems so simple and easy, you may have a lot of problems when you test, I just did not do a detailed explanation, such as no access Ah, then given permission Connaught, by default, site permissions for IIS Apppool\defaultapppool, If you have insufficient permissions to configure NET service or every one, or if you create a Vue site that does not have access to the corresponding error code, you need to install the routing rewrite program through the Web platform.

Summarize

In this section we briefly describe how to implement the separation of an ASP. NET core application from the front-end framework (such as Vue), followed by the Vue interface call, and time to update the ASP. NET core interface with Vue for AJAX requests.