NestJs使用静态服务渲染vue项目与html项目

一、创建一个新的 Nest 应用

1. 全局安装Nest CLI

yarn add -g @nestjs/cli

2. 创建 NestJS 应用

nest new test-dist

显示这个就代表安装成功了，然后跟着指示命令走

cd test-dist
yarn run start

执行yarn run start后修改代码不会热更新，所以推荐使用yarn run start:dev

在浏览器运行http://127.0.0.1:3000,出现下面得图就代表成功了一步了

二、设置为提供静态内容

1. 安装依赖

yarn add @nestjs/serve-static

2. 使用依赖
   ![在这里插入图片描述](https://img-blog.csdnimg.cn/58d06dc9822b44b6a0edcbcfc9e0a11d.png

写到这一步了，再去浏览器验证一下

发现并没有变化，这是因为他走的还是接口路径，所以我们就需要把接口路径加个前缀，这样就可以不干扰到静态路径了

修改过后，再去验证一下发现抛出了以下错误

看错误信息404下面的那句话没有找到这个路径，所以我们就根据错误信息去创建文件

然后再去浏览器验证一下

到这里就说明成功了，vue也就是打包后把dist文件夹替换了就可以了

再在浏览器输入http://127.0.0.1:3000/api

发现hello world又出现了这就证明了互不干扰了，就可以愉快的部署一个服务就可以实现api与静态访问了