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利用mongoose获取mongodb数据的格式化问题详解

    node.js利用mongoose获取mongodb数据的格式化问题详解

    这篇文章主要给大家介绍了关于node.js利用mongoose获取mongodb数据的格式化问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习把。
    2017-10-10
  • 基于nodejs的雪碧图制作工具的示例代码

    基于nodejs的雪碧图制作工具的示例代码

    雪碧图就是把很多小图标合并为一张图片,这篇文章主要介绍了基于nodejs的雪碧图制作工具的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Express使用html模板的详细代码

    Express使用html模板的详细代码

    本篇文章主要介绍了Express使用html模板的详细代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 浅谈node模块与npm包管理工具

    浅谈node模块与npm包管理工具

    这篇文章主要介绍了node模块与npm包管理工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • websocket+node.js实现实时聊天系统问题咨询

    websocket+node.js实现实时聊天系统问题咨询

    最近新学习websocket,做了一个实时聊天。用Node.js搭建的服务:serevr.js. 两个相互通信页面:client.html 和server.html 但是就是有很多问题,下面通过本文给大家分享下
    2017-05-05
  • node.js中的buffer.length方法使用说明

    node.js中的buffer.length方法使用说明

    这篇文章主要介绍了node.js中的buffer.length方法使用说明,本文介绍了buffer.length的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • Node.js与MySQL交互操作及其注意事项

    Node.js与MySQL交互操作及其注意事项

    这篇文章给大家主要介绍了Node.js与MySQL交互操作及其注意事项,非常的详细,有相同需求的小伙伴可以参考下
    2016-10-10
  • 详解使用nvm安装node.js

    详解使用nvm安装node.js

    本篇文章主要介绍了详解nvm安装node.js,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 如何通过node.js来写接口详解

    如何通过node.js来写接口详解

    最近研究了一下nodejs写接口,发现接口并不难写,这篇文章主要给大家介绍了关于如何通过node.js来写接口的相关资料,文中通过实例代码和图文介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Node+Express+MongoDB实现登录注册功能实例

    Node+Express+MongoDB实现登录注册功能实例

    这篇文章主要介绍了Node+Express+MongoDB实现登录注册功能,需要的朋友可以参考下
    2017-04-04

最新评论