https://github.com/pikax/vuejsaspnetcoretemplate
Template to publish vuejs SPA using aspnet core
https://github.com/pikax/vuejsaspnetcoretemplate
dotnetcore template template-project visual-studio vuejs
Last synced: 3 months ago
JSON representation
Template to publish vuejs SPA using aspnet core
- Host: GitHub
- URL: https://github.com/pikax/vuejsaspnetcoretemplate
- Owner: pikax
- License: mit
- Created: 2019-01-18T15:16:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-18T15:30:21.000Z (over 7 years ago)
- Last Synced: 2025-01-28T08:51:14.649Z (over 1 year ago)
- Topics: dotnetcore, template, template-project, visual-studio, vuejs
- Language: Vue
- Size: 369 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# VueJsAspnetCore
Template to integrate [VueJs](https://github.com/vuejs/vue) on [Visual Studio](https://visualstudio.microsoft.com/) aspnetcore project.
Publish `.csproj` using `vuejs` as SPA
# How to use
## Requirements
Needs yarn, but you can adapt easily to use npm instead, just need to edit `.csproj`
## Development
For development I recommend using
`yarn serve`
or
`npm run serve`
## Publish
`dotnet publish`
or
using Visual Studio
# From the scratch
Create an empty aspnetcore project +2.0
## Update *.csproj*
Add
```xml
%(DistFiles.Identity)
PreserveNewest
```
### if using npm
use
```xml
%(DistFiles.Identity)
PreserveNewest
```
## update `Startup.cs`
### AddSpaStaticFiles
Add in ConfigureServices
```csharp
services.AddSpaStaticFiles(x =>
{
x.RootPath = "dist"; // set static files to dist
});
```
like this
```csharp
public void ConfigureServices(IServiceCollection services)
{
services.AddSpaStaticFiles(x =>
{
x.RootPath = "dist"; // set static files to dist
});
}
```
### Configure
Add in Configure
```csharp
app.UseSpaStaticFiles(new StaticFileOptions()
{
#if !DEBUG
OnPrepareResponse = ctx =>
{
// https://developers.google.com/web/fundamentals/performance/webpack/use-long-term-caching
ctx.Context.Response.Headers[HeaderNames.CacheControl] = "max-age=" + 31536000;
}
#endif
});
app.UseSpa(x =>
{
x.Options.DefaultPage = "/index.html";
});
```