vue-项目上线

最新推荐文章于 2024-04-03 12:25:20 发布
最新推荐文章于 2024-04-03 12:25:20 发布
阅读量154 收藏
点赞数
分类专栏： vue框架使用 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuziming112/article/details/106385823
版权

项目上线相关配置

通过node创建web服务器

创建node项目，并安装express，通过express快速创建web服务器，将vue打包生成的dist文件夹，托管为静态资源即可
在这里插入图片描述

开启gzip配置

使用gzip 可以减小文件体积，使传输速度更快
可以通过服务器端使用Express做gzip压缩，其配置如下：
在这里插入图片描述

配置HTTPS服务（后端配置）

使用pm2管理应用

（1）在服务器中安装pm2：npm i pm2 -g
（2） 启动项目：pm2 start 脚本 --name 自定义名称
（3） 查看运行项目：pm2 Is
（4） 重启项目：pm2 restart+ 自定义名称
（5） 停止项目：pm2 stop +自定义名称
（6） 删除项目：pm2 delete+自定义名称

噢噢怪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue，前端打包项目、部署上线
m0_59259076的博客
10-08 578
前端项目是在本地的IDE开发的。流程是：开发=》打包=》上线到生产环境=》使用。vue脚手架只是开发过程中,协助开发的工具,当真正开发完了，脚手架不参与上线。这时候要用到打包了。打包后,可以生成,浏览器能够直接运行的网页=>就是需要上线的源码!打包的作用:①将多个文件压缩合并成一个文件。②语法降级。③ less sass ts语法解析....打包的命令和配置说明:vue脚手架工具已经提供了打包命令，直接使用即可。yarn build:在项目的根目录会自动创建一个。
Vue的项目准备
qq_53721052的博客
11-13 611
Vue的项目准备
Vue项目部署上线全过程（保姆级教程）
ajhk11的博客
11-22 1万+
vue项目打包上线全过程
Vue2项目上线打包优化
kangaroo的博客
11-09 3285
vue项目各种上线优化汇总，不定时更新
Vue 项目上线优化(1)，web开发技术发展
最新发布
weixin_57992300的博客
04-03 553
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。
vue项目上线的步骤
weixin_50240716的博客
12-28 3057
一、通过node创建web服务器 ① 创建一个文件夹vue_shop_server，通过webstore打开 ② 在webstore的终端运行 npm init 来初始化一个包管理工具,生成package.json文件 ③ 运行 npm i express -s 安装express包 ④ 把vue-shop项目中打包好的dist文件夹复制一份到vue_shop_server文件夹中 ⑤ 在vue_shop_server中创建一个app.js文件 ⑥ 导入express，通过 express 快速创建 w
浅谈vue项目4rs vue-router上线后history模式遇到的坑
10-17
今天小编就为大家分享一篇浅谈vue项目4rs vue-router上线后history模式遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
12-13
做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法： 1. 方法一： 在build/utils.js下面找到这段代码，将其中publicPath...
vue-cli与webpack处理静态资源的方法及webpack打包的坑
12-09
Vue-cli为Vue项目搭建的脚手架的确很方便，但打包时容易出现空白页，或者对应的静态资源加载不了。  我是通过将项目/config下的index.js的assetsPublicPath变成’./’，变成相对路径，进行解决。 cd vue demo ...
07-Vue全家桶-项目上线1
08-03
1. 项目优化 1. 生成打包报告 2. 第三方库启用 CDN 4. 路由懒加载 5. 首页内容定制 1. 项目优化 1. 生成打包报告 1. 项目优化 1.
Vue项目优化&&项目上线
weixin_48884617的博客
04-22 1584
Vue项目优化&&项目上线
vue打包部署nginx 配置
01-24
vue开发完毕，打包之后上线，传到nginx服务器配置问题解决
Vue项目上线打包步骤
qq_46034942的博客
05-15 6281
Vue项目打包上线
关于vue2.0工程发布上线操作步骤
weixin_39370315的博客
01-26 8442
找了不少资料如何发布到服务器，然而还是没找到合适的可实际操作的文档。很多文档打着上线发布的标题，其实就是本地运行而已。其实vue2.0工程发布相当简单。 文章重点： 讲解vue工程配置部分的意义 如何打包为生产环境中的前端工程 如何打包发布到云端以及nginx服务器配置 一、vue工程配置部分的意义 首先我们先看下vue2.0整体工程目录结构 (非重点省略) - vueDemo
vue 项目上线
qq_38779317的博客
07-28 122
1 项目上线相关配置 1.1 通过 node 创建 web 服务器 创建 node 项目, 并安装 express, 通过 express 快速创建 web 服务器, 将 vue 打包生成的 dist 文件夹, 托管为静态资源即可, 关键代码如下: const express = require("express") // 创建服务器 const app = express() // 托管静态资源 app.use(express.static("./dist")) // 启动 we
阿里云CentOs中Vue项目的上线（node+express+pm2）
weixin_42467467的博客
04-11 228
通过node创建web服务器 1. 创建node项目 创建一个文件夹 初始化包管理配置文件 npm init -y 2. 安装express， 通过express快速创建web服务器 安装express npm i express -S 3. 新建app.js入口文件，进行如下配置 const express = require('express') // 创建 web 服务器 c...
手把手教你VUE前端项目发布上线
热门推荐
王华春_Jason
06-25 2万+
准备工作 已经写好的代码，有团队的需要拉取最新的代码（今天重点分享团队前端项目的发布过程） 软件：（包括但不限于）——如果工具都OK，将大大降低发布难度 Nginx：轻量级web服务器 Jenkins：持续集成开发工具 Tomcat：轻量级的应用服务器 Xshell：安全终端模拟软件 VSCode：前端开发工具 当然还有Maven、Gitlib、JDK，这些都是团队开发的必备工具 基础知识： 敏捷开发（Agile Development） 的核心是迭代开发（Iterative De.
vue-cli 3.x 上线 【入坑合集】
cometang--唐家世少
11-22 2875
vue-cli 3.x 打包上线 【入坑合集】 问题1：使用vue-cli 3.x开发的项目，开发的时候顺利无比，一旦打包上线各种问题就来了。首先是资源里面报各种各样的请求错误。 解决思路：在src文件夹同级目录下创建vue.config.js文件 在vue.config.js中重写打包后的基础路径为当前目录 module.exports = { //... baseUrl: '...
vue项目上线步骤
Claire_Moon的博客
09-05 1703
今天，我要将前几篇文章中做好的项目上线，步骤如下; 一. 工具准备 需要用到这个工具 finalshell.exe，来连接服务器，可以自行下载并安装，简单~ https://pan.baidu.com/s/1LvMGdZ8u9r3Cqa–UsEyDw 二. 服务器准备 我买的是阿里云服务器，买了服务器，就会拥有一台服务器，当然也会拥有固定的IP，至于域名，可以选择注册，也可以不注册（注册域名，要进...
谷歌安装vue-devtools以及上线项目关闭vue-devtools调试
08-10
关于上线项目时如何关闭 Vue Devtools 的调试功能，您可以按照以下两种方式进行操作： 1. 移除 Vue Devtools 插件： - 在谷歌浏览器的扩展程序栏中找到 Vue Devtools 图标。 - 右键点击图标，选择 "从 Chrome 中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值