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

 更新时间:2023年05月03日 07:48:50   作者:Y_soybean_milk  
众所周知Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,下面这篇文章主要给大家介绍了关于node.js快速部署vue代码的详细步骤,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

技术: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代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解在node.js中require方法的加载规则

    详解在node.js中require方法的加载规则

    这篇文章主要介绍了详解在node.js中require方法的加载规则,本文一步步解析了require加载规则,讲述了核心的模块,路径形式的模块,第三方模块等,需要的朋友可以参考下
    2021-06-06
  • Node.js实现简单的爬取的示例代码

    Node.js实现简单的爬取的示例代码

    这篇文章主要介绍了Node.js实现简单的爬取的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • Node.js学习之内置模块fs用法示例

    Node.js学习之内置模块fs用法示例

    这篇文章主要介绍了Node.js学习之内置模块fs用法,结合实例形式详细分析了node.js内置模块fs的基本功能、用法与相关操作注意事项,需要的朋友可以参考下
    2020-01-01
  • 基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践

    基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践

    关于前后端分享的思考,我们已经有五篇文章阐述思路与设计。本文介绍淘宝网收藏夹将 Node.js 引入传统技术栈的具体实践。
    2014-09-09
  • Node.js中JWT实现身份验证的详细步骤

    Node.js中JWT实现身份验证的详细步骤

    身份验证是Web开发的重要组成部分,JWT由于其简单性,安全性和可扩展性,已成为在Web应用程序中实现身份验证的流行方法,在这篇文章中,我将指导你在Node.js应用程序中使用MongoDB进行数据存储来实现JWT身份验证,需要的朋友可以参考下
    2024-12-12
  • Async/Await替代Promise的6个理由

    Async/Await替代Promise的6个理由

    这篇文章主要介绍了Async/Await替代Promise的6个理由,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • nvm安装方法以及安装后node不能使用解决

    nvm安装方法以及安装后node不能使用解决

    在我们的日常开发中经常会遇到这种情况,手上有好几个项目,每个项目的需求不同,进而不同项目必须依赖不同版的NodeJS运行环境,nvm应运而生,这篇文章主要给大家介绍了关于nvm安装方法以及安装后node不能使用解决的相关资料,需要的朋友可以参考下
    2023-04-04
  • Node.js中下包速度慢问题解决方法分析

    Node.js中下包速度慢问题解决方法分析

    这篇文章主要介绍了Node.js中下包速度慢问题解决方法,分析了npm切换镜像源以及nrm工具镜像源管理相关使用技巧,需要的朋友可以参考下
    2023-04-04
  • 使用Node.js处理前端代码文件的编码问题

    使用Node.js处理前端代码文件的编码问题

    这篇文章主要介绍了使用Node.js处理前端代码文件的编码问题的方法,Node自带的相关类库处理编码方面的问题时还是比较得心应手的,需要的朋友可以参考下
    2016-02-02
  • nodejs模块nodemailer基本使用-邮件发送示例(支持附件)

    nodejs模块nodemailer基本使用-邮件发送示例(支持附件)

    本篇文章主要介绍了nodejs模块nodemailer基本使用-邮件发送示例(支持附件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03

最新评论