vue项目打包后如何本都部署访问

news2024/11/24 2:00:59

npm run build生成dist项目后,在windows部署访问。
方式一:
1、新建一个文件夹 进入目录后打开cmd 输入npm init -y
2、输入 npm i express -s 是用于在 Node.js 项目中安装 Express 框架的命令
3、.将项目打包好的dist文件放入其中以及新建一个app.js文件用于运行
4、app.js内容如下
const express = require(‘express’)

const app = express()

const port = 8080 // 自定义端口号(不要与已存在端口冲突)

app.use(express.static(‘./dist’)) // dist 是项目的打包资源路径

app.listen(port, () => console.log(服务器 ${port} 开启成功!))
5、接着在cmd输入运行命令 node .\app.js
6、上诉启动后 输入127.0.0.1:端口号即可访问
缺点,输入其他路由报错,点击按钮可以跳转,不知道怎么解决,直接转入方式二。

方式二:安装nginx
1下载好nginx后解压并配置好环境变量
2将打包的dist文件夹拷贝到html文件夹
3配置nginx配置文件
在这里插入图片描述
启动nginx 正常访问

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/714763.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++ 二叉搜索树

1. 内容安排说明 二叉树在前面 C 数据结构阶段已经讲过,本节取名二叉树进阶是因为: 1. map 和 set 特性需要 先铺垫二叉搜索树,而二叉搜索树也是一种树形结构 2. 二叉搜索树的特性了解,有助于更好的理解 map 和 set 的特性 …

在JDK17尝鲜Flink1.17

在JDK17尝鲜Flink1.17 前言 还没玩明白老版本,Flink1.17就来了!!!总还是要向前看的。。。 根据官网文档:https://nightlies.apache.org/flink/flink-docs-release-1.17/docs/try-flink/local_installation/ Flink r…

【Excel技巧】如何将一堆文字快速整理成一列表格数据?

在平时的工作中,我们有时候需要把很多零散的分布的内容(比如姓名),复制到Excel工作表的单元格内,变成一列。如果一个个复制粘贴,显然太过繁琐。 如何批量快速的完成这一操作呢?只需要下面简单几…

关于排查springboot启动时页面出现404

今天在进行开发时,Contronller代码没有问题,前端html也没问题,发现当浏览器输入localhost:8080时404,于是进行排查发现,SpringbootWebApplication文件放到了子目录下。 springboot的启动文件必须放在父目录下才可以检测…

【Git原理与使用】-- 远程操作

目录​​​​​​​ 理解分布式版本控制系统 远程仓库 新建远程仓库 lssue 与 Pull Request模板文件 知识铺垫 lssue 模板文件 Pull Request模板文件 克隆远程仓库 使用 HTTPS 方式 使用 SSH 方式 第一步:创建SSH Key 向远程仓库推送 过程梳理 实操 …

Java安全——安全提供者

Java安全 安全提供者 在Java中,安全提供者(Security Provider)是一种实现了特定安全服务的软件模块。它提供了一系列的加密、解密、签名、验证和随机数生成等安全功能。安全提供者基础设施在Java中的作用是为开发人员提供一种扩展和替换标准…

vue中使用Drawflow连线插件,并对端口进行命名

效果如图 场景:项目中需要拖拽模块并连线,有输入端和输出端之分,不同模块不同端口才能相连 文档相关 点击前往------->原项目git地址 点击前往------->提供端口既可输出又可输出方案 点击前往----->查阅发现原项目无法对端口命名 public文件夹下创建drawflow文件夹…

myCobot 280 2023机械臂全新功能,手柄控制、自干涉检测

引言 机械臂是一种可编程的、自动化的机械系统,它可以模拟人类的动作,完成各种任务,例如装配、喷涂、包装、搬运、焊接、研磨等。由于其高度灵活性和多功能性,机械臂在现代社会中已经得到了广泛的应用。 myCobot 280 M5Stack 20…

在服务器部署前后端分离的项目(前后都有), 并使用nginx配置跨域

怎样部署自己的项目呢 先准备一个服务器(小系统最便宜的轻量级服务器就行, 如果不需要给人访问的话)安装宝塔面板 (宝塔面板, 可视化界面, 操作简单, 使用非常方便, 上手也很容易, 如果只是学习, 虚拟机也行没必要花钱, 我使用的CentOS7系统,安装宝塔面板)软件: MySQL, Tomcat…

【问题记录】多线程环境下,使用 std::cout 输出内容会显示混乱

环境 Windows 11 家庭中文版Microsoft Visual Studio Community 2022 (64 位) - Current 版本 17.5.3 测试代码 #include <iostream> #include <Windows.h>//创建的线程数量 #define THREAD_COUNT 4DWORD WINAPI ThreadProc(LPVOID lpParam) {UNREFERENCED_P…

JS事件监听

目录 事件监听 事件监听案例 事件监听 事件&#xff1a;HTML事件是发生在HTML元素上的“事情” 按钮点击鼠标移动到元素上按下键盘按键事件监听&#xff1a;JS可以在事件被检测到时执行代码事件绑定 方法一&#xff1a;通过HTML标签中的事件属性进行绑定 <input type"…

在windows环境下安装支持CUDA的opencv-python

文章目录 附件&#xff1a;GPU和CUDA的关系 —— 开发人员通过CUDA可以使用GPU的计算能力来加速各种计算任务&#xff0c;并提高计算性能和效率。一、环境配置&#xff08;0&#xff09;我的电脑配置环境&#xff08;1&#xff09;CUDA cuDNN下载与安装&#xff08;2&#xff…

【云原生、Kubernetes】Kubernetes核心概念理解

首先我们要掌握 Kubernete 的一些核心概念。 这些核心可以帮助我们更好的理解 Kubernetes 的特性和工作机制。 集群组件 首先&#xff0c;Kubernetes 集群中包含2类节点&#xff0c;分别是&#xff1a;master控制节点和node工作节点。 master 控制节点 负责管理整个集群系统…

【手撕算法|动态规划系列No.4】leetcode91. 解码方法

个人主页&#xff1a;平行线也会相交 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

软件测试:系统测试

1 系统测试的概念 系统测试&#xff08;System Testing&#xff09;的定义&#xff1a;将已经集成好的软件系统&#xff0c;作为整个基于计算机系统的一个元素&#xff0c;与计算机硬件、外设、某些支持软件、数据和人员等其他系统元素结合在一起&#xff0c;在实际运行&#…

HDLBits刷题笔记8:Circuits.Sequential Logic.Latches and Flip-Flops

D flip-flop module top_module (input clk,input d,output reg q );always (posedge clk)q < d; endmoduleD flip-flops 建立一个8bit的D触发器 module top_module (input clk,input [7:0] d,output reg [7:0] q );always (posedge clk)q < d; endmoduleDFF with res…

GDAL 图像直方图统计

文章目录 一、简介二、实现代码三、实现效果参考资料 一、简介 这里使用一种简单的方式来计算图像中的像素值直方图分布。计算过程如下所述&#xff1a; 第一种方式&#xff1a; 1、首先将图像变为一维数组&#xff08;reshape&#xff09;&#xff0c;并将数组中的数值进行排序…

vue点击盒子一步一步滚动

vue点击盒子一步一步滚动 HTML <div class"course_detail"><div class"arrow" v-if"index 0" click"step"></div><div class"lightArrow" v-else click"step"></div><div clas…

自定义的车牌号键盘组件

<template><view class"keyboard-wrap" v-if"kbShow"><view class"head"><view class"done" tap"done"><text class"iconfont iconxiala-"></text>关闭</view></vi…

2. 注册platform

这里先分析platform 对应的dts内容如下 i2s0_8ch: i2sff800000 {compatible "rockchip,rv1126-i2s-tdm";reg <0xff800000 0x1000>;interrupts <GIC_SPI 46 IRQ_TYPE_LEVEL_HIGH>;clocks <&cru MCLK_I2S0_TX>, <&cru MCLK_I2S0_RX&g…