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

2021-09-19 05:39:07

背景介绍：

在一个以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显式显示出来。想要的效果如下图地址栏所示。