How to run Vue on an ASP. NET Core application and deploy it on IIS

How to run Vue on an ASP. NET Core application and deploy it on IIS

Preface

From. NET Core 1.0 is applied to the project at the beginning. some principles of NET Core have not yet been studied, but they are only used. However, there are a lot of articles in the garden. With a little spare time, let's talk about how to use ASP.. NET Core is run on IIS with Vue.

ASP. NET Core and Vue are deployed in IIS

We will not describe how to install Vue and Webpack. We will directly create an ASP. NET Core application or create an ASP. NET Core application through dotnet new mvc.

Next, run the following command in the preceding application to create a Vue template:

vue init webpack my-projectcd my-projectnpm install

Next we use npm run dev to start Vue.

At this time, the Vue is also running, and we can perform a local test with Jason. After completing the first step, we implement the separation before and after the production environment, deploy the above ASP. NET Core application to IIS as a separate site, and also use Vue as a separate site. Next, deploy the above application to IIS.

The application pool in the Basic settings of the site aspnetcore created on IIS is of course unmanaged code. If not, download the. NET Core run time on your own.

In this case, we need to modify the Vue configuration file and modify the Index. js file in the config folder of the generated Vue template project to configure the directory of the generated file, as shown below:

Then run the npm run build command to generate the vue file in the wwwroot folder.

Then we create a front-end site and place the files generated above to the site. For example, I created a VueDemo.

Does everything seem so simple and easy? You may encounter many problems during the above test. I just did not provide a detailed description, for example, you have no access permission, given the permission, the site permission is iis apppool \ DefaultAppPool by default. If the permission is insufficient, configure net service or every one, the corresponding error code is displayed when the created Vue site cannot be accessed. In this case, you need to install the route rewriting program on the Web platform.

Summary

This section briefly introduces how to implement ASP.. NET Core applications and front-end frameworks (such as Vue) are separated before and after the preceding steps are completed, then the Vue is called for the interface, and the time will be updated to use Vue for Ajax request ASP.. NET Core interface.

Well, the above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.