NetCore项目发布对前端项目进行打包合并发布

摘要:
在一个小项目中,api是使用asp编写的。netcore3.x,UI页面使用Vuejs。在正常情况下,项目右键单击发布将只发布api项目,而不是Vuejs项目。因此,通过简单的转换,在发布项目时,不仅可以编译和发布api本身,还可以编译和公布Vuejs编写的页面。这样,两个项目可以一起部署。当然,我们也可以通过CI/CD解决问题。项目结构:*。Manager是一个asp的webapi项目。netcore3 3.x

在某个小项目中, api使用asp.net core 3.x 编写, UI页面则使用Vuejs. 正常情况下, 项目右键的发布只会发布api项目,而不会管Vuejs的项目.
所以通过简单的改造,在发布该项目时不光发布api本身, 同时也编译和发布Vuejs写的页面. 这样子就可以2个项目一起部署了.
当然我们也可以通过CI/CD来解决问题.

项目结构:
NetCore项目发布对前端项目进行打包合并发布第1张

*.Manager 是一个asp.net core 3.x的webapi项目, 主要为ui提供接口.
ClientApp 目录下时Vuejs的前端UI项目.
ClientAppdist 是vuejs在build时的目标文件夹, 记得在.gitignore里面排除,这样vuejs build的产物就不用提交到版本控制了.

Api项目的配置更改点:

Startup增加SPA配置

//Startup.ConfigureServices
services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp";
});
//Startup.Configure
app.UseCors(x => x.AllowAnyOrigin().WithMethods("Get", "POST", "PUT", "DELETE", "OPTIONS"));
app.UseSpaStaticFiles();
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    //环境变量可以在我们F5调试运行api项目时控制是否要内嵌启动npm 因为我通常喜欢在vscode里面单独编辑调试启动ui项目, 因为在vscode里面的编辑体验比在vs里面好.
    //正常发布后的运行只需要返回index.html即可.
    if (bool.TryParse(Environment.GetEnvironmentVariable("StartClient"), out var isStartClient) && isStartClient)
    {
        if (env.IsDevelopment())
        {
            //内部启动一个进程运行 npm run serve.
            spa.UseVueCli(npmScript: "serve");
        }
    }
});

Vuejs项目的变动

在开发模式时, 将对api的访问全部proxy到我们的asp.net core api 上去.

module.exports = {
    devServer: {
        host: '127.0.0.1',
        port: 8080,
        proxy: {
            '/api': {
                target: 'http://localhost:5000',
                headers: { 'user-agent': 'projectName manager-client webpack proxy' }
            }
        }
    }
}

在项目文件夹中增加npm的build任务

在Manager这个项目的csproj文件中,在Project section 下加入如下配置

	<Target Name="PublishVue" AfterTargets="ComputeFilesToPublish">
		<PropertyGroup>
			<SpaRoot>ClientApp</SpaRoot>
		</PropertyGroup>
		<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
		<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
		<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
		<ItemGroup>
			<SpaDistFiles Include="$(SpaRoot)dist**"></SpaDistFiles>
		</ItemGroup>
		<Copy SourceFiles="@(SpaDistFiles)" DestinationFiles="@(SpaDistFiles->'$(PublishDir)$(SpaRoot)%(RecursiveDir)%(Filename)%(Extension)')" />
	</Target>

这样, 在项目上右键点击发布后, 在bin目录就会有一个SpaRoot(ClientApp)的目录,对应的Vuejs的相关文件也都copy到这里了.

免责声明:文章转载自《NetCore项目发布对前端项目进行打包合并发布》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇直线光栅画法ES6中import {} 的括号下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

PIP安装软件报错:“ERROR: Could not install packages due to an EnvironmentError: HTTPSConnectionPool(host='files.pythonhosted.org', port=443)”

遇到问题: 最近PIP安装软件总是报错,报错提示如下: 1.WARNING: Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) after connection broken by 'ConnectTimeoutError(<pip._vend...

Vue国际化三【在下拉框中使用】

select 内容国际化 <myForm :form-config="formConfig" :filters="filters" @handleChage="handleSearch" @handleSearch="handleSearch" /> computed: {...

Ubuntu16 编译源码安装MXNet 可变卷积Deformable-ConvNets GPU版

【引言】最近接手了公司的关于虫子识别的项目,使用MXNet框架开发,但是实际用的是Deformable-ConvNets. Deformable-ConvNets为微软研究研究院提出的可变卷积网络,可用于对图像中大小不一的物体识别,不是单单识别图中的猫和狗(它们都一般大小),而识别图像中不同种类的虫子(虫子本身小,而且难以区分),在这样的场景下很适合用可变...

软件过程

典型软件生存周期: 需求分析——软件分析——软件设计——编码(测试)——软件测试——运行维护 软件过程 1.瀑布模型: 2.快速原型模型 快速原型模型需要迅速建造一个可以运行的软件原型 ,以便理解和澄清问题,使开发人员与用户达成共识,最终在确定的客户需求基础上开发客户满意的软件产品。 快速原型模型允许在需求分析阶段对软件的需求进行初步而非完全的...

vue 子页面怎么调用父页面的方法

vue高级组件之provide / inject 在vue中不同组件通信方式如下 1.父子组件,通过prop 2.非父子组件,通过vuex或根vue转载器  通常是以上两种情况,然而还有一种比较特殊的情况,即孙子组件或更深层次的组件通信 1.下面是a.vue   <template>   <div class="te...

vue页面是否缓存的两种方式

第一种 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view&g...