重读vue电商网站53之项目上线

简介: 重读vue电商网站53之项目上线

通过 node 创建 web 服务器。

开启 gzip 配置。

配置 https 服务。

使用 pm2 管理应用。

通过 node 创建 web 服务器

创建 node 项目,并安装 express,通过 express 快速创建 web 服务器,将 vue 打包生成的 dist 文件夹,托管为静态资源即可,关键代码如下:

Javascript

const express = require('express')

// 创建 web 服务器

const app = express()

// 托管静态资源

app.use(express.static('./dist'))

// 启动 web 服务器

app.listen(80, () => {

console.log('web server running at http://127.0.0.1')

})

第一步,先创建一个文件夹,这里命名为 vue_shop_server,然后通过 Code 打开。

新建一个终端,输入 npm init -y 执行,初始化包管理配置文件。

图片.png

初始化完成后,执行 npm install express -S 安装 express


接下来,将我们 vue 项目通过 build 打包得到的 dist 文件夹复制一份,粘贴到我们的 vue_shop_server文件夹内,然后再新建一个 app.js 入口文件,结构图如下图所示。

图片.png

测试服务器是否能够运行,新建终端,执行 node .\app.js 命令。如果发现输出了 web server running at http://127.0.0.1 则表示服务已经启动了。

图片.png

开启 gzip 配置


配置完之前服务之后,我们打开网站后,发现请求网络中文件体积依旧是很大,如下图所示。

图片.png

使用 gzip 可以减小文件体积,使传输速度更快。


可以通过服务器端使用 Express 做 gzip 压缩。其配置如下:


Javascript


// 安装相应包

npm install compression -S

// 导入包

const compression = require('compression');

// 启用中间件

app.use(compression());

此时的 app.js 文件代码如下所示,注意,一定要把启用中间件放在托管静态资源之前! 不然 gzip 压缩不会生效。


Javascript

const express = require('express')
 // 导入包
 const compression = require('compression');
 // 创建 web 服务器
 const app = express()
 // 启用中间件
 app.use(compression());
 // 托管静态资源
 app.use(express.static('./dist'))
 // 启动 web 服务器
 app.listen(80, () => {
 console.log('web server running at http://127.0.0.1')
 })



目录
打赏
0
0
0
0
64
分享
相关文章
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
127 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
Vue实现动态数据透视表(交叉表)
Vue实现动态数据透视表(交叉表)
78 13
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具,适合自定义复杂的流程图。文章从环境要求(Node.js v20+ 和 Vue 3.3+)、基础入门案例、自定义功能(节点与连线的定制、事件处理)到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性,虽然预定义内容较少,但提供了丰富的 API 支持深度定制。同时,文中还分享了关于句柄(handles)的使用方法,以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid,总结 Vue Flow 更适合需要高度自定义和复杂需求的场景,并附带多个相关技术博客链接供进一步学习。
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
160 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
116 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
118 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。