[原创] 分享一种Asp.NetMVC WebApi作为后端技术结合Vue前端框架开发时开发环境的优雅配置方案

背景介绍:

在一个以AspNet MVC Web API技术为后端的Web开发项目中,使用了Vue 2.0+作为前端表现技术。

在进行两种开发框架的物理文件整合的时候,笔者不想把他俩的物理文件都“揉”在一个文件夹下面。

想尽量隔离开来,方便前后端两类开人员,把精力只关注到自己的开发文件上。

具体配置:

1、在Asp.Net MVC Web API项目文件夹下,新建一个文件夹“vue_src”(名称可以根据自己的需要,随意),把Vue创建的前端项目文件都放置在此文件夹下。

2、接下主要是针对vue.config.js文件的设置:

module.exports = {
    //https://cli.vuejs.org/zh/config/
    publicPath: '/vuejs/',
    outputDir: '../vuejs', //当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除。Default: 'dist'
    assetsDir: 'static', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    indexPath: '../index.html', //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。Default: 'index.html'
    productionSourceMap: false, //如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
    //如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。
    devServer: {
        proxy: {
            '/api':{
                target:'http://localhost:8001/api',
                changeOrigin:true,
                pathRewrite:{
                    '/api':''
                }
            }
        }
    }
}

 上面的设置,会使前端编译后的文件,放在前端源码目录同级“vuejs”目录下(将来发布web系统时,将跟随后端一起发布),还会在站点根目录生成首页文件index.html。

    上面的设置中,还有一个代理的设置,在进行前端开发工作时,需要用到。

前端的设置就是这些。

站在后端开发角度,希望打开网站首页时,即可直接显示前端的html页面,最好默认就是index.html,但又不想把index.html显式显示出来。想要的效果如下图地址栏所示。

但是此时你会发现Asp.net MVC 默认不会显示这个前端首页。你需要手工加上index.html才行。

如何把index.html隐藏掉呢?

答案是利用url重定向,重定向有两种,我们这里使用服务端重定向,这样url就会比较干净。

代码如下:

到此就结束了。

一年多没怎么接触web开发和前端开发了,这一次有机会又接触了一下,手生了不少,捣鼓了好久。在此记录一下,以防下次再用到。

原文地址:https://www.cnblogs.com/luqingfei/p/14047083.html