.Net3.1 Asp.net core 使用Vue

版本

.net 3.1
vue3.0

Vue设置

vue设置很简单,写完程序后运行打包命令:

npm run build

生成了静态文件,目录如下:

Asp.net Core设置

将vue生成的静态文件全部复制到wwwroot目录下,没有就创建一个

在Startup.cs的Configure中添加如下代码:

using Microsoft.AspNetCore.Http;
using System.IO;

	app.UseDefaultFiles();  //默认访问index.html
	app.UseStaticFiles();   //使用wwwroot下的静态文件
	
	// 防止刷新页面报404
	app.Run(async (context) =>
	    {
			context.Response.ContentType = "text/html";
			await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
		});

跨域

如果vue中访问的是此.net core的api,还需要设置跨域:
在vue.config.js中设置:

module.exports = {
    publicPath:'/',    // 公共路径
    outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 根据生产环境更换打包路径
    assetsDir: "assets",
    lintOnSave: false,  
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:5137/api/',
                ws: true,
                changeOrigin: true,
                pathRewrite: {  
                    '^/api': ''
                }

            }
        }
    }
};

Startup.cs中的ConfigureServices方法中添加:

 services.AddCors(options =>
            {
                options.AddDefaultPolicy(
                    builder =>
                    {
                        builder.WithOrigins("*");
                    });
            });

Configure添加

app.UseCors();