vue2项目的打包以及部署

        打包 

         当我们写好vue2的项目后,可以通过npm build来对项目进行打包

npm build

        打包完成后我们可以看到在当面目录下生成了dis目录,src下的文件都会被打包进这个目录里,当然打包后的文件我们不能直接在浏览器打开,需要进行部署

部署

        1.新建一个空的文件夹

        2.在vsCode打开

        3.进行初始化

npm init

        回车以后输入项目名然后一直回车即可

        4.安装express

npm i express

        5.进行部署,新建一个server.js

const express =require('express')const app =express()app.use(express.static(__dirname+'/static'))app.get('/person',(req,res)=>{res.send({name:"xiaobai",age:18})
})app.listen(5005,(err)=>{if(!err) console.log("服务器启动成功")
})

        6.启动项目

node server

        在浏览器输入我们刚刚定义的路径就可以返回我们所写的数据,到这我们的服务器就搭建成功了

        

http://localhost:5005/person

        7.创建一个static文件夹,将刚刚打包的项目放到该文件夹下面

           使用改页面

app.use(express.static(__dirname+'/static'))

        8.重新启动服务器,可以看到我们的项目

        9.如果我们在组件中定义的木块为history,可以通过以下方式来避免404

                9.1安装插件

npm i connect-history-api-fallback

                        9.2引入并使用

​
const history= require('connect-history-api-fallback')
app.use(history())

                9.3重新启动就可以避免history进行跳转就可以避免404了

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

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

相关文章

【golang】常用的文件操作

golang常用的文件操作(错误处理没写,根据需求完善) package mainimport ("io""os""path/filepath""strings" )// 判断是否是目录 func IsDir(name string) bool {if info, err := os.Stat(name); err == nil {return info.IsDir()…

RFID技术在粉末涂料配料生产线的精准应用

RFID技术在粉末涂料配料生产线的精准应用 应用背景 随着科技的快速发展,智能化、自动化已经成为现代工业生产的重要趋势。RFID(无线射频识别)技术以其独特的优势,如非接触式识别、高速读取、大容量数据存储等,在多个…

中国民间网络外交组织(CCND)

中国民间网络外交组织Chinese Civil Network Diplomacy简称(CCDN) 是由中国网民建立起来的一个网络外交组织,深度贯彻党的主张和网民意志的统一,为保护中国中华优秀传统文化,民族自信,国家安全,民族利益,社…

【golang】执行cmd命令并解决中文乱码问题

参考代码 package mainimport ("bufio""fmt""io""os/exec""syscall""time""golang.org/x/text/encoding/simplifiedchinese" )type charset stringconst (UTF8 = charset("UTF-8")GB1803…

实战:基于Java的实时数据流处理平台

实战:基于Java的实时数据流处理平台 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 什么是实时数据流处理? 实时数据流处理是指在数据…

DICOM灰度图像、彩色图像的窗宽、窗位与像素的最大最小值的换算关系?

图像可以调整窗宽、窗位 dicom图像中灰度图像可以调整窗宽、窗位,RGB图像调整亮度或对比度?_灰度 图 调节窗宽-CSDN博客 窗宽、窗位与像素的最大最小值的换算关系? 换算公式 max-minWindowWidth; (maxmin)/2WindowCenter; 详细解释 窗宽&#xff0…

Michael.W基于Foundry精读Openzeppelin第61期——ERC1967Upgrade.sol

Michael.W基于Foundry精读Openzeppelin第61期——ERC1967Upgrade.sol 0. 版本0.1 ERC1967Upgrade.sol 1. 目标合约2. 代码精读2.1 _getImplementation() internal && _upgradeTo(address newImplementation) internal2.2 _upgradeToAndCall(address newImplementation,…

详解大模型是如何理解并使用 tools ?

前文 大家肯定对使用大模型的函数回调或者说 Tools 已经耳熟能详了,那么他们具体内部是如何运作的呢,本文就此事会详细给大家介绍具体的细节。 tools 首先是大家最熟悉的环节,定义两个 tool 的具体实现,其实就是两个函数&#…

校园兼职小程序的设计

管理员账户功能包括:系统首页,个人中心,商家管理,管理员管理,用户管理,兼职管理,论坛管理,公告管理 微信端账号功能包括:系统首页,公告,兼职&…

Docker 一篇到位

目录 01. Docker使用导航 02. Build Share Run 样例 03. 理解容器 04. 安装 Docker 05. Docker 样例(常见命令使用) 下载镜像 启动容器 修改页面 保存镜像 docker commit docker save docker load 分享社区 docker login docker tag do…

730天的创作之旅:我的技术写作之路

机缘 两年前的今天,我作为一名测试工程师,带着对技术的热爱和对分享的渴望,开启了我的创作者之旅。最初,我希望通过我的文章,将我在实战项目中的经验、日常学习过程中的点滴记录下来,并通过这些文字与更多…

EtherCAT主站IGH-- 5 -- IGH之debug.h/c文件解析

EtherCAT主站IGH-- 5 -- IGH之debug.h/c文件解析 0 预览一 该文件功能`debug.c` 文件功能函数预览二 函数功能介绍`debug.c` 中主要函数的作用1. `ec_debug_init`2. `ec_debug_clear`3. `ec_debug_register`4. `ec_debug_unregister`5. `ec_debug_send`6. `ec_dbgdev_open`7. `…

【408考点之数据结构】二叉树的概念与实现

二叉树的概念与实现 一、二叉树的概念 二叉树是一种特殊的树结构,其中每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树广泛应用于许多计算机科学领域,如表达式解析、排序、搜索算法等。 二、二叉树的性质 性质1&#xff1a…

数字化转型过程中企业会遇到哪些挑战?该如何应对?

你是否与我一样,也曾有过类似的疑惑: 企业数字化转型过程中会遇到哪些挑战?其中苦难,我们又该如何应对?有什么可借鉴的方法? 有了这些疑问,你肯定想知道答案。 为了解决你的心头之患&#xf…

高级队列实现代理穿透及迁移

一、参数调优 1.1、登录穿透专用数据库 su - oracle 1.2、通过sqlplus登录 sqlplus create pfile =/home/oracle/pfile11.ora from spfile; alter system set processes=8000 scope=spfile; alter system set sessions=10400 scope=spfile; alter system set result_ca…

rocketmq实现多数据源配置

rocketmq实现多数据源配置 背景:一 添加ExtRocketMQTemplateConfiguration配置类二 添加非标mq的配置参数三 非标准RocketMQTemplate 背景: 在实际项目中我们可能会遇到在springboot项目中使用多个mq数据源,那我们该如何配置呢? …

基于若依(ruoyi-vue)的周报管理系统

喂wangyinlon 填报人页面 审批人 审批不通过,填报人需要重新填写.

自动编码器简单理解及简单使用描述

1. 什么是自动编码器? 自动编码器分为编码器和解码器,其中解码器只在训练阶段用到。具体过程就是: 首先,输入训练样本,编码器对输入样本进行编码,对其进行降维,直到到达某个瓶颈层&#xff1b…

Python基础总结之什么是迭代?迭代的概念介绍

Python基础总结之什么是迭代?迭代的概念介绍 在Python中,迭代(Iteration)是一种基本的编程概念,用于逐个访问集合(如列表、元组、字典、集合等)中的每个元素。迭代是Python编程中不可或缺的一部…

高考后如何进入IT领域:详细学习路线图与实战经验分享

高考终于告一段落,是不是感觉整个人都轻松了许多?先恭喜你,顺利迈过了这一重要的阶段!但别忘了,高考的结束只是一个新的开始,特别是对于那些有志于进入IT领域的同学们。这个暑假,是你们开启IT世…