.Net3.1 Asp.net core 使用Vue

admin

版本

.net 3.1
vue3.0

Vue设置

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

1. npm run build

复制代码

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

Asp.net Core设置

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

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

1. using Microsoft.AspNetCore.Http;
2. using System.IO;
4. app.UseDefaultFiles(); //默认访问index.html
5. app.UseStaticFiles(); //使用wwwroot下的静态文件
7. // 防止刷新页面报404
8. app.Run(async (context) =>
9. {
10. context.Response.ContentType = "text/html";
11. await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
12. });

复制代码

跨域

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

1. module.exports = {
2. publicPath:'/', // 公共路径
3. outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 根据生产环境更换打包路径
4. assetsDir: "assets",
5. lintOnSave: false,
6. devServer: {
7. proxy: {
8. '/api': {
9. target: 'http://localhost:5137/api/',
10. ws: true,
11. changeOrigin: true,
12. pathRewrite: {
13. '^/api': ''
14. }
16. }
17. }
18. }
19. };

复制代码

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

1. services.AddCors(options =>
2. {
3. options.AddDefaultPolicy(
4. builder =>
5. {
6. builder.WithOrigins("*");
7. });
8. });

复制代码

Configure添加

1. app.UseCors();

复制代码

来源：https://blog.csdn.net/baozi141990/article/details/122166672
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！