首页 > 其他分享 >vue2项目的打包以及部署

vue2项目的打包以及部署

时间:2024-07-02 21:28:09浏览次数:16  
标签:npm 部署 app express static vue2 打包 history

        打包 

         当我们写好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了

标签:npm,部署,app,express,static,vue2,打包,history
From: https://blog.csdn.net/weixin_68926017/article/details/140135733

相关文章

  • 在华为云服务器上通过宝塔面板部署Node.js项目的完整流程
    引言        个人想体验一下完整的项目部署上线过程,因此设计了一个后台管理系统,后端采用nodejs实现,前端基于Vue3和TS,主要部署的流程如下(既然是流程,那就一步步来,当初自己部署的时候看别人记录,有些地方突然就理所当然了......大佬们可能觉得我们都会)。    于是......
  • Elasticsearch集群部署(上)
    目录前言一.环境准备二.实施部署三. 安装配置head监控插件(只在第一台es部署)四.Kibana部署(当前还是在第一台es部署)五. 安装配置Nginx反向代理六. Logstash部署与测试前言1.Elasticsearch:  是一个基于Lucene的搜索服务器。提供搜集、分析、存储数据三大......
  • python系列&deep_study系列:Whisper——部署fast-whisper中文语音识别模型
    Whisper——部署fast-whisper中文语音识别模型Whisper——部署fast-whisper中文语音识别模型环境配置准备tiny模型模型转换代码Whisper——部署fast-whisper中文语音识别模型whisper:https://github.com/openai/whisper/tree/main参考文章:WhisperOpenAI开源语音......
  • 基于web实现的物业管理系统项目(运行视频+源码+数据库+部署文档)
    项目描述文档1.项目概述本项目旨在开发一个综合性物业管理系统,涵盖了保安保洁管理、保修管理、房产信息管理、公告管理、管理员信息管理、业主信息管理和登录管理等多个功能模块。该系统使用了JSP作为前端页面的开发技术,结合Bootstrap和jQuery进行页面设计和交互,后端则使用J......
  • 服务器上怎么部署docker
    在服务器上部署Docker主要涉及以下几个步骤,这里以UbuntuLinux为例,其他操作系统的步骤略有不同:在Ubuntu上部署Docker的步骤:1.安装Docker更新包索引:sudoaptupdate安装依赖包,以允许apt使用HTTPS访问Docker仓库:sudoaptinstall-yapt-transport-h......
  • 打包警告:chunk common [mini-css-extract-plugin]Conflicting order between:
    1.问题webpage5打包告警:chunkcommon[mini-css-extract-plugin]Conflictingorderbetween:2.解决方案:-vue.config.js配置//vue.config.jsmodule.exports={//...,css:{extract:{ignoreOrder:true},}};或者:调整组件引入的顺序3.......
  • 多个vue项目nginx部署流程
    nginx部署流程#在nginx.conf中配置#usernobody;worker_processes1;#error_loglogs/error.log;#error_loglogs/error.lognotice;#error_loglogs/error.loginfo;#pidlogs/nginx.pid;events{worker_connections1024;}http{incl......
  • 宝塔安装部署 ModstartCMS 一款开源内容管理系统的CMS-(值得收藏)
    一、ModstartCMS的简介ModStartCMS是一款基于Laravel框架的开源内容管理系统(CMS),它设计的目标是为了简化Web应用程序的开发流程。这个系统强调模块化开发,提供了丰富的模块和模板库,使得开发者能够迅速搭建功能全面的网站或后台管理系统。ModStart遵循Apache2.0开源协议,不仅......
  • Meta平台新纪元 Facebook机器人源码/部署实战教程
    随着Meta平台的不断升级,Facebook机器人成为了连接品牌与用户的新桥梁。本文将为您提供一份详尽的Facebook机器人源码及部署实战教程,助您在新纪元中抢占先机,实现精准营销。一、了解Meta平台与Facebook机器人首先,深入了解Meta平台的最新动态及Facebook机器人的应用场景。明确机......
  • 频道管理新高度 YouTube自动化脚本源码/部署指南
    提升YouTube频道管理效率,自动化脚本是关键。本指南将带您深入了解YouTube自动化脚本的源码结构与部署流程,助您实现频道管理的新高度。一、源码结构解析核心模块:登录认证、视频处理、评论管理、订阅者互动等。辅助模块:日志记录、错误处理、定时任务等。二、环境准备与依赖安......