返回顶部
首页 > 资讯 > 前端开发 > JavaScript >node.js快速部署vue代码详细步骤
  • 594
分享到

node.js快速部署vue代码详细步骤

node 部署vuenode.js vuenodejs部署vue项目 2023-05-18 14:05:22 594人浏览 八月长安
摘要

目录前言一、快速搭建小型服务器1、用npm管理项目2、安装express3、目录里新建服务器的主文件 server.js,写入如下代码4、启动服务器5、访问服务器信息二、部署前端静态

技术:node.js + express框架

前言

Vue代码打包后生成dist文件,直接打开里面的index.html,页面是无法正常展示的

所以需要用服务器部署它们,跟着我一起用node.js快速部署吧! 

 注:vue打包命令 npm run build

一、快速搭建小型服务器

1、用npm管理项目

  •         新建demo文件夹
  •         终端输入命令 npm init
  •         取项目名 

然后一路回车到底

2、安装express

npm i express

3、目录里新建服务器的主文件 server.js,写入如下代码

// 引入express
const express = require('express')
// 调用express,创建一个app 服务实例对象
const app = express()
// 配置后端路由
app.get('/person', (req, res) => {
    console.log('访问到了')
    //  给客户端返回东西
    res.send({
        name: 'lily',
        age:18
    })
 })
// 设置端口监听
app.listen(5000, (err) => {
    if (!err) console.log('服务器启动成功了!')
    err && console.log(err)
})

一个微型的服务器就搭建起来了

4、启动服务器

node server

5、访问服务器信息

能正常访问就代表服务器配置成功了,注意配置路由的时候,要加‘/’

二、部署前端静态资源

1、根目录下新建一个文件(一般命名为static或public),把vue打包后的dist目录里的html、CSS、js文件放进去

2、server.js中指定静态资源位置

app.use(express.static(__dirname+'/static'))
// 引入express
const express = require('express')
// 调用express,创建一个app 服务实例对象
const app = express()
// 指定静态资源
app.use(express.static(__dirname+'/static'))
// 配置后端路由
app.get('/person', (req, res) => {
    console.log('访问到了')
    //  给客户端返回东西
    res.send({
        name: 'lily',
        age:18
    })
 })
// 设置端口监听
app.listen(5000, (err) => {
    if (!err) console.log('服务器启动成功了!')
    err && console.log(err)
})

3、访问静态资源

点击跳转其它页面,也能正常访问

这样,一个vue写的项目就部署到服务器上了

如果你设置的路由器的工作模式是hash模式,那么到这一步就完结了!!

但是,如果你设置的路由器工作模式是history模式,跳转到其他页面,刷新后就会报错

三、解决路由为history模式的报错

1、问题

通过主页点击跳转到其他页面时,可以正常显示

刷新该页面,就会报 404

2、原因

  • 点击跳转时,不会发送网络请求,前端路由器带动页面、url变化
  • 但刷新时,会发送网络请求。 把后面的路径当成资源,去请求服务器,而服务器下没有 /home/news 这个资源,所以就报错了
  • hash模式时,不会把#/及后面的路径当成资源,去请求服务器

3、解决

  • 需要后端人员支持,解决刷新页面服务端404的问题 --- 要区分资源是属于前端路由还是后端路由
  • 如果服务器采用的是node.js可以采用connect-history-api-fallback中间件来解决
  • 它是专门用于在node.js里面去解决history模式404的问题

https://www.npmjs.com/package/connect-history-api-fallback

1、安装 connect-history-api-fallback

npm i connect-history-api-fallback

2、使用connect-history-api-fallback

// 引入express
const express = require('express')
// 引入connect-history-api-fallback
const history = require('connect-history-api-fallback');
// 调用express,创建一个app 服务实例对象
const app = express()
// 注意:必须写在指定静态资源前
app.use(history())
// 指定静态资源
app.use(express.static(__dirname+'/static'))
// 配置后端路由
app.get('/person', (req, res) => {
    console.log('访问到了')
    //  给客户端返回东西
    res.send({
        name: 'lily',
        age:18
    })
 })
// 设置端口监听
app.listen(5000, (err) => {
    if (!err) console.log('服务器启动成功了!')
    err && console.log(err)
})

其他解决方法:后端写正则匹配、Nginx...

完结,撒花!

总结

到此这篇关于node.js快速部署vue代码的文章就介绍到这了,更多相关node.js部署vue代码内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: node.js快速部署vue代码详细步骤

本文链接: https://lsjlt.com/news/212133.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • node.js快速部署vue代码详细步骤
    目录前言一、快速搭建小型服务器1、用npm管理项目2、安装express3、目录里新建服务器的主文件 server.js,写入如下代码4、启动服务器5、访问服务器信息二、部署前端静态...
    99+
    2023-05-18
    node 部署vue node.js vue nodejs部署vue项目
  • 在Docker快速部署Node.js应用的详细步骤
    一、前言 可能还有一些同学不了解docker这个项目,docker是由go语言编写的,一个快速部署的轻量级虚拟技术项目,他允许开发人员将自己的程序和运行环境一起打包,制作成一个docker的image(镜像...
    99+
    2022-06-04
    步骤 快速 详细
  • 部署MySQL的详细步骤
    本篇内容主要讲解“部署MySQL的详细步骤”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“部署MySQL的详细步骤”吧! 1.新建配...
    99+
    2024-04-02
  • Docker部署MicrosoftSqlServer详细步骤
    目录1 背景2 创建容器3 修改SA密码4 链接mssql5 容器外链接mssql总结1 背景 自 SQL Server 2019 CU3 起,支持 Ubuntu 18.04。 自 ...
    99+
    2024-04-02
  • Docker下部署lnmp详细步骤
    目录拉取一个centos镜像基于centos生成nginx容器基于centos生成mysql容器基于centos生成php容器制作镜像用新镜像创建lnmp容器测试拉取一个centos...
    99+
    2024-04-02
  • Docker部署portainer的详细步骤
    portainer Portainer是Docker的图形化管理工具,由GO语言编写的,提供状态显示、应用模板快速部署、对于Docker(容器、镜像、网络、数据卷)的基本操作、日志显...
    99+
    2024-04-02
  • kafka安装部署超详细步骤
    目录概述Step 1: 下载代码Step 2: 启动服务Step 3:创建一个主题Step 4: 发送消息Step 5: 消费消息Step 6: 设置多个broker集群(单机伪集群...
    99+
    2024-04-02
  • 部署Node.js到阿里云服务器的详细操作步骤
    Node.js是一种基于Chrome V8JavaScript引擎的、运行在服务端的JavaScript运行环境。阿里云服务器是阿里云推出的一种云计算产品,提供了丰富的云服务和强大的计算能力。本文将详细介绍如何将Node.js部署到阿里云服...
    99+
    2023-11-17
    阿里 操作步骤 服务器
  • Python和Pycharm 环境部署详细步骤
    一、python下载安装 下载安装python最新版本 https://www.python.org/downloads/windows/ 这里勾选添加到环境变量 cmd中运行一下看是否安装成功 二、pycha...
    99+
    2022-06-02
    Python Pycharm 环境部署 Python Pycharm 部署
  • Docker容器部署consul的详细步骤
    目录Consul简介Consul 使用场景-consul部署- 容器服务自动加入consul集群安装Gliderlabs/Registrator Gliderlabs/Re...
    99+
    2024-04-02
  • MySQL8.0主从部署配置详细步骤
    环境:CentOS7+MySQL8 hostnameip角色c7-lab110.10.104.51主c7-lab210.10.104.52从 一、安装MySQL数据库 1.1、下载mysql8,下载...
    99+
    2023-09-15
    linux 运维 centos mysql
  • Docker 部署 Gitlab 服务器(详细步骤)
    目录         Gitlab镜像 1、拉取Gitlab镜像 2、启动Gitlab容器  3、修改配置 4、浏览器访问  5、修改root密码 6、gitlab操作 Gitlab镜像 1、拉取Gitlab镜像 docker pul...
    99+
    2023-09-06
    docker
  • DeepinV20快速安装Mariadb的详细步骤
    MySQL的创始人麦克尔·维德纽斯主导开发,早前曾以10亿美元的价格,将自己创建的公司MySQL卖给了SUN,此后,随着SUN被甲骨文收购,MySQL的所有权也落入Oracle的手中...
    99+
    2024-04-02
  • 快速安装Docker详细步骤教程
    目录一、Docker的基本组成1、Docker服务端和客户端客户端-服务端(C/S) :浏览器 - 服务端(B/S) :2、Docker的基本组成二、Docker的在线安装三、Doc...
    99+
    2024-04-02
  • 基于docker 部署canvas-lms的详细步骤
    准备: 一台8G内存的服务器。安装好docker, pull一个ubuntu镜像下来, 可以是最新版也可以是官方支持的14/ 16 更新时间: 2018-04-04 Step 1: ...
    99+
    2024-04-02
  • 在nginx中部署https服务,详细步骤
    目录 前言 一、https是什么? 二、部署步骤 1.下载SSL证书 2.上传文件 3.解压文件 4.在nginx.conf配置文件中,修改https服务 5.修改hosts文件 6.http跳转到https中 三、注意事项 前言 Web...
    99+
    2023-08-31
    nginx 运维 服务器 https
  • 阿里云ECS部署HHVM的详细步骤
    HHVM是一种开源的高性能虚拟机,它能够在PHP应用中提供更快的执行速度和更高的安全性。本文将详细介绍如何在阿里云ECS上部署HHVM。 在阿里云ECS上部署HHVM,首先需要在阿里云的控制台上创建一个ECS实例,并配置好安全组规则。然后,...
    99+
    2023-10-30
    阿里 步骤 详细
  • Vue项目打包并部署nginx服务器的详细步骤
    目录使用场景:一.打包二.部署(nginx)总结使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署。 一.打包 vue项目其实可以直接通过一下语句进行打包: np...
    99+
    2024-04-02
  • vue项目打包后部署到服务器的详细步骤
    耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一...
    99+
    2024-04-02
  • IDEA快速创建maven项目详细步骤
    目录 前言必读: 1.Maven和Maven Archetype区别? 2.创建maven项目之前的步骤(必看) 一、创建maven 1.打开idea--->文件--->新建--->项目 2.新建项目--->自定义项目名称--->选择Mav...
    99+
    2023-10-18
    intellij-idea maven java 配置maven 依赖管理
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作