vue node.js 开发教程(将前端框架vue打包后部署到node服务中)(1)

本文采用nodejs框架egg(与koa2类似,可兼容koa2的模块)来演示将vue部署到node服务中,避免通过配置Nginx来实现

首先将vue打包后的dist文件夹下的static下的资源放置到egg工程下app/dist文件夹中,下图是在congfig.js配置文件中修改静态资源文件的路径与vue中一致。

vue node.js 开发教程(将前端框架vue打包后部署到node服务中)(2)

项目目录如下:

vue node.js 开发教程(将前端框架vue打包后部署到node服务中)(3)

紧接着将vue打包后的dist下的index.html放置到egg工程目录下view/dist(为了区分本工程原有文件)中;路由配置如下,注意其中有一个解决vue的history模式的刷新出现404的问题

vue node.js 开发教程(将前端框架vue打包后部署到node服务中)(4)

配置到此项目可以启动,访问localhost:xxxx可以访问到vue打包后的index.html

最后我们开始解决vue工程中的跨域接口代理问题;

写一个中间件,此处配置与vue中相同

vue node.js 开发教程(将前端框架vue打包后部署到node服务中)(5)

vue代理配置:

vue node.js 开发教程(将前端框架vue打包后部署到node服务中)(6)

不要忘记在egg配置文件中启用中间件:

vue node.js 开发教程(将前端框架vue打包后部署到node服务中)(7)

然后我们就可以愉快的访问项目了

vue node.js 开发教程(将前端框架vue打包后部署到node服务中)(8)

,