How to use ASP.NET Core application running Vue and deploying on IIS

Time:2021-4-11

preface

We have applied it to the project since. Net core 1.0, but I’m not sure ASP.NET Some principles of core have not been studied yet, and are limited to being able to use. However, there are a large number of articles in the garden. Let’s talk about how to use them in our spare time ASP.NET Core and Vue run on IIS.

ASP.NET Deploying core and Vue in IIS

The installation of Vue and webpack will not be described. Let’s create it directly ASP.NET Core applications can be created through dotnet new MVC ASP.NET Core applications

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


vue init webpack my-project
cd my-project
npm install

Next, we use NPM run dev to start Vue

At this time, Vue is also running, and we can test it locally. The first step is completed, and then we separate the front and back in the production environment to separate the above ASP.NET The core application is deployed to IIS as a separate site, while Vue is also deployed as a separate site. Next, we will deploy the above application to IIS.

In the basic settings of aspnetcore created on IIS, the application pool is of course unmanaged code. If not, please download the. Net core runtime by yourself.

At this point, what we need to do is to modify the Vue configuration file, and modify the file in the config folder of the generated Vue template project Index.js File to configure the directory where the generated file is located, as follows:

Next, run the NPM run build command to generate the Vue file in the wwwroot folder.

Then we create a front-end site and put the above generated files under the site. For example, I created vuedemo.

It seems that everything is so simple and easy. There may be a lot of problems when you carry out the above test. I just didn’t explain in detail. For example, if you don’t have permission to access, you can give permission. By default, the site permission is IIS apppool \ \ defaultapppool. If you don’t have enough permission, you can configure net service or every One, or the created Vue site cannot be accessed, and the corresponding error code appears. At this time, the routing rewriter needs to be installed through the web platform.

summary

In this section, we briefly describe how to achieve this ASP.NET The core application is separated from the front-end framework (such as Vue). After the above, the next step is for Vue to make interface calls. When there is time, Vue will be updated to make Ajax requests ASP.NET Core interface.

Well, the above is the whole content of this article, I hope the content of this article has a certain reference learning value for your study or work, if you have any questions, you can leave a message to exchange, thank you for your support to developer.