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

最新推荐文章于 2024-07-03 11:09:16 发布
最新推荐文章于 2024-07-03 11:09:16 发布
阅读量741 收藏 2
点赞数 1
分类专栏： Nestjs 文章标签： vue.js 前端 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36571175/article/details/130843090
版权

一、创建一个新的 Nest 应用

  1. 全局安装Nest CLI
yarn add -g @nestjs/cli
  1. 创建 NestJS 应用
nest new test-dist

![在这里插入图片描述](https://img-blog.csdnimg.cn/c3ab487a44eb4fbb8b31f2a1ec24f59a.png
显示这个就代表安装成功了，然后跟着指示命令走

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
  1. 使用依赖
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/58d06dc9822b44b6a0edcbcfc9e0a11d.png在这里插入图片描述

写到这一步了，再去浏览器验证一下
在这里插入图片描述
发现并没有变化，这是因为他走的还是接口路径，所以我们就需要把接口路径加个前缀，这样就可以不干扰到静态路径了
在这里插入图片描述
修改过后，再去验证一下发现抛出了以下错误
在这里插入图片描述
看错误信息404下面的那句话没有找到这个路径，所以我们就根据错误信息去创建文件
在这里插入图片描述
然后再去浏览器验证一下
在这里插入图片描述
到这里就说明成功了，vue也就是打包后把dist文件夹替换了就可以了

再在浏览器输入http://127.0.0.1:3000/api
在这里插入图片描述
发现hello world又出现了这就证明了互不干扰了，就可以愉快的部署一个服务就可以实现api与静态访问了

Candy灬小妖
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nestjs+vue+ts打造一个酷炫的星空聊天室(含完整数据库设计)
程序员成长指北
08-05 1785
作者：edisonC原文地址：https://juejin.im/post/6854573222415826957简介???? 闲暇时间想做一个聊天室复盘一下这些年学习到的技术，于是在2...
nestjs+vue+ts打造一个酷炫的星空聊天室
weixin_44622178的博客
07-27 278
项目界面 项目地址 点击链接可以看到项目的gif图 github: https://github.com/genaller/genal-chat 项目描述 前端: vue+vue-router+vuex+socket.io+typescript 后端: nestjs+nestjs/websocket+typescript 功能介绍 更改用户名/头像上传 群聊/私聊 新增群/加入群聊/模糊搜索群 添加好友/模糊搜索好友 表情包 消息分页 环境配置 数据库mysql 以及 chat数据库 node v1
在Next.js项目中，如何结合TypeScript进行服务器端渲染，并处理服务器与客户端类型差异？
最新发布
极客前端探索者的博客
07-03 365
在Next.js项目中结合TypeScript进行服务器端渲染（SSR）主要涉及到几个步骤，同时处理服务器与客户端的类型差异也需要一些策略。
一个简单的Nest.js+Vue的项目调用
克里斯蒂亚诺更新的博客
04-23 290
这样就实现了 Vue.js 前端项目调用 Nest.js 后端服务的功能。在 Vue.js 项目中，可以使用 Axios 或者 Fetch API 来调用 Nest.js 后端服务。在上面的示例中，我们在 Vue.js 组件中使用 Axios 发起 GET 请求，调用 Nest.js 后端服务的。首先，我们需要准备两个项目：一个是 Nest.js 的后端服务项目，另一个是 Vue.js 的前端项目。然后在 Vue.js 项目中的组件中使用 Axios 来调用 Nest.js 后端服务，例如在。
serve-static：使用Nest框架（node.js）服务静态网站（SPA）:broccoli:
02-16
一个渐进式的框架，用于构建高效且可扩展的服务器端应用程序。 描述 @nestjs/serve-static软件包，用于提供静态内容，例如单页应用程序（SPA）。 但是，如果您正在构建MVC应用程序或要提供资产文件（图像，文档），请改用useStaticAssets()方法（了解更多）。 安装 $ npm i --save @nestjs/serve-static 例子 查看完整示例。 用法 只需在您的Nest应用程序中导入ServeStaticModule 。 import { Module } from '@nestjs/common' ; import { join } from 'path' ; import { ServeStaticModule } from '@nestjs/serve-static' ; @ Module ( { imports : [ Serv
nest.js_使用Nest.js，MongoDB和Vue.js构建现代应用
culiu9261的博客
07-22 1144
nest.js 介绍 ( Introduction ) Nest.js introduces a modern way of building Node.js apps by giving it a proper and modular structure out of the box. It was fully built with TypeScript but still preserves ...
使用 nest.js 基于 node.js 和 nuxt.js 基于 vue.js 开发的 CMS 系统
06-01
2. **SSR（Server-Side Rendering）与SSG（Static Site Generation）**：Nuxt.js支持服务器端渲染和静态站点生成，对于SEO优化至关重要，因为可以提供预渲染的HTML页面供搜索引擎抓取。 3. **目录结构**：Nuxt.js的...
修改vue项目到服务器端渲染,vue-server-renderer实现vue项目改造服务端渲染
weixin_31556767的博客
08-04 1235
这是一篇教程，从创建项目到改造项目vue-cli创建一个项目在放你做demo的地方，创建一个项目vue create vue-ssr// 如果你安装了vue-cli4，选择vue2的版本，以下的改进过程是按vue2来做的经过漫长的等待，下载好文件开始我们的改造之路文件目录进入vue-ssr文件夹，使用命令vue ui把vue-router装上先安装几个依赖插件// 安不上用cnpm，yarn，np...
18章Vue3+NestJS 全栈开发企业级管理后台
08-17
NestJS 的一些优势包括： 构建在现代 JavaScript 栈之上，因此使用了最新的 JavaScript 技术。 基于 Angular 的架构和语法，提供了强大的模块化系统和依赖注入功能。 基于 TypeScript，提供了强类型和静态类型检查。...
高考志愿填报系统，前台VUE3，后端node.js配置nest.js框架.zip
01-01
【高考志愿填报系统】是一个基于前端Vue3和后端Node.js Nest.js框架的项目，旨在为高考生提供方便快捷的志愿填报服务。这个系统不仅适用于实际的高考志愿填报，也适合于毕业设计或课程设计，作为学生提升技能、实践...
NestJs 静态目录配置详解
11-30
网上查看了很多文档，发现很多都是自己实现中间件来完成此功能，不仅浪费时间，而且增加了太多的代码量。实际上，nest已经帮助我们封装好了相关功能。 1、查找线索 由于官方文档没有做详细解释说明，那么我们可以从此框架底层入手： 我们知道，nestjs底层用的是express，那么express是通过什么来完成静态目录构建的： serve-static 2、搜索源码 我们在项目搜索栏目中搜索“serve-static”会发现如下图： 也就是说，当我们在使用nest框架的时候，serve-static 会随之而构建好，那么我们直接参考其源码即可：依赖地址 Nestjs 源码： // Type
nest-admin:采用nestjs typeorm vue开发的一套权限管理系统
03-11
项目说明 前端使用模板，初步使用nestjs typeorm等开发 项目特点 nest-admin权限管理系统，是基于nodejs打造出的一站式RBAC管理平台 使用技术 ， ， ， 开发 优秀的菜单功能权限，前端可灵活控制页面及按钮展示，某些可对未授权的请求进行拦截 当前已有功能：用户管理，角色管理，部门管理，菜单管理，文件管理 下一步计划 更好的系统日志 新增角色时，角色权限只能是创建者权限的子集，有效防止权限越权 部门任选绑定角色 项目结构 服务器初步项目结构 ── src // 构建相关 ├── commin // 公共代码，工具类等 │ ├── decorators // 自定义装饰器，包含 @Permssion 权限装饰器 │ ├── interfaces
angular-nestjs-rendering：使用NestJS进行Angular 5+服务器端渲染
01-30
Angular NestJS Universal（服务器渲染） src / client <-Angular 5+ src / server <-NestJS src / shared <-在应用之间共享 创意斗 用于构建全栈解决方案的软件咨询公司。 精通：NodeJS，TypeScript，Angular，MongoDB ... <any> .js库:) 你有项目给我们吗？ hello@innovic.io 已包含 REST API Web套接字 安装 npm install 发展历程 开发端口打开：4200（继承自angular-cli） 在开发中，必须将NestJS中的每个控制器（路由）映射到proxy.conf.json中 npm start 不要忘记不时整理和整理代码： npm run client:lint npm run server:lint npm run prettify 生产 生产端口在.env中指定（默认为5400） npm run build:universal # test production npm run serve:unive
一个canvasnest的Vuejs背景组件
08-08
一个canvasnest的Vuejs背景组件
NestWithVue:演示从Nest后端为Vue网站提供服务的小型应用程序
04-13
描述 一个示例，展示了如何从NestJS后端为VueJS网站提供服务。 安装 $ npm install # Install Vue dependencies $ cd client && npm i && cd .. $ npm run build --prefix client 运行应用 # development $ npm run start # watch mode $ npm run start:dev # production mode $ npm run start:prod 附加信息 作者-（ 许可-。 。
Astro+Vue3+NestJS+TS搭建服务端渲染SSR
remy0817的博客
09-16 791
设置 astro.config.mjs 中 node 适配器的 mode 为 middleware，将 astro 作为中间件加载到 Nestjs 服务。src/components/ 下放组件，可以是 Astro、React、Preact、Svelte、Vue、SolidJS、AlpineJS、Lit、Markdown。src/pages/ 下，api 子目录在未开启 SSR 时放静态文件端点，在开启 SSR 时放服务器端点（API 路由）。
1.1 nest搭建静态服务
LetsStudy的博客
12-05 711
nest.js初始化
nestjs+vue+ts打造一个酷炫的聊天室(含完整数据库设计)
frontend_frank的博客
09-01 267
作者：edisonC原文地址：https://juejin.im/post/6854573222415826957简介???? 闲暇时间想做一个聊天室复盘一下这些年学习到的技术，于是在2020年6月24号就开始了 Genal 聊天室的开发之旅。???? 项目采用全 typescript 开发，这是为了以后的功能迭代打基础。当然，我本身也是很喜欢 typescript 的。项目界面功能介绍更改用户名/头像上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值