一.项目打包(vite创建的项目)

执行以下这条命令对项目进行打包

npm run build

生成dist文件夹,进入dist文件夹下的index.html文件,然后右键选择Open with Live Serve开启一台端口号为5500的本地服务器来打开网页,发现404错误.

这是因为index.html文件中引入的资源路径以项目根目录开始,我们需要在资源路径前面添加"/dist",此时用到了vite的配置项base.

在vite.config.ts配置文件中,添加base配置.如图:(如果是以vue脚手架的方式创建项目,则是添加publicPath配置项)

此时重新打包,进入项目就不会报404错误.

由于打包后没有代理服务器,如果我们本地想看打包后的页面效果,前提是后端配置了CORS解决跨域

二.静态资源的上传

一般由我们自己将打包好的dist文件夹的静态资源上传到公司服务器的指定目录下,可以借助FileZilla软件

2.1.FileZilla的下载

官方下载地址：https://www.filezilla.cn/download

这里我们下载客户端（client）然后安装

2.2.Filezilla的使用

2.2.1.新建站点

Ubuntu 作为 FTP 服务器，FileZilla 作为 FTP 客户端，客户端肯定要连接到服务器上，打开
站点管理器，点击：文件->站点管理器

新建站点以后就会在“我的站点”下出
现新建的这个站点，站点的名称可以自行修改，比如我将新的站点命名为“Ubuntu”如图

2.2.2.设置站点

选中新创建的“Ubuntu”站点，然后对站点的“常规”进行设置

2.3.进行文件的传输

Vue3项目的打包运行的更多相关文章

  1. dropwizard问题记录1：如何进行mvn package打包，如何在项目目录下运行

    dropwizard的helloworld入门教程,跟着教程一步步写很容易,但是最后打包时暴露了自己底子太差的缺陷 mvn package操作 之前工作中完全没有接触过这种打包方式,都是直接打war包 ...

  2. docker 运行jenkins及vue项目与springboot项目(二.docker运行jenkins为自动打包运行做准备)

    docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...

  3. 简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

    码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14363272.html 关于VUE的项目,有个问题一直不是特别清楚 ,不同公司的项目 ...

  4. Vue(1):用Vue-cli构建Vue3项目

    使用Vue-cli构建Vue3项目 1.检查node版本 node -v 以上node版本位14.15.0满足Vue3项目的创建条件(Vu3需要node 版本8以上) 为什么需要安装node? vue ...

  5. 从零搭建基于webpack的Electron-Vue3项目（1）——基于webpack的Vue3项目搭建

    从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到El ...

  6. Maven可以使用mvn package指令对项目进行打包，如果使用Java -jar xxx.java

    Maven可以使用mvn package指令对项目进行打包,如果使用Java -jar xxx.jar执行运行jar文件,会出现"no main manifest attribute, in ...

  7. vue-webpack项目自动打包压缩成zip文件批处理

    为什么需要这个? 使用vue框架开发项目,npm run build这个命令会一直用到,如果需要给后端发包,那你还要打包成zip格式的压缩包,特别是项目提测的时候,一天可能要执行重复好几次,所以才有了 ...

  8. eclipse 如何对maven项目进行打包？

      eclipse 如何对maven项目进行打包? CreateTime--2018年4月19日22:02:50 Author:Marydon 1.方式一:使用eclipse中的maven插件(命令) ...

  9. Java应用程序项目的打包与发行

    Java应用程序项目的打包与发行    这里主要是讲解一下怎样将 Java程序打包成独立运行的exe程序包,以下这种方法应该是最佳的解决方案了.NetDuke的EXE 程序包了是使用这种方案制作的.在 ...

  10. spring boot项目Intellij 打包

    spring boot项目Intellij 打包 学习了:http://blog.csdn.net/hzt_fighting_up/article/details/78174291 在edit con ...

随机推荐

  1. React-Hook知识整理与总结

    1.useState:让函数式组件拥有状态 2.useEffect:副作用,取代生命周期 3.useContext:跨组件共享数据 4.useCallback:性能优化 5.useMemo:性能优化 ...

  2. Log4j日志框架使用

    Log4j是Apache下的一款开源的日志框架,能够满足我们在项目中对于日志记录的需求.一般来讲,在项目中,我们会结合slf4j和log4j一起使用.Log4j提供了简单的API调用,强大的日志格式定 ...

  3. HAL层分析

    1. 安卓HAL模块基本 2. 定义hal层代码的5个特性 1)硬件抽象层具有与硬件的密切相关性. 2) 硬件抽象层具有与操作系统无关性. 3) 接口定义的功能应该包含硬件或者系统所需硬件支持的所有功 ...

  4. 使用声网 SDK 构建 Piloteer 助盲服务平台的最佳实践

    前言 在今年声网主办的「RTE2022 编程挑战赛」中,数支队伍经过一个多月的努力开发,很多优秀的作品最终突出重围,斩获大奖.本文由RTE2022编程挑战赛获奖者之一李新春撰写,他主要围绕获奖作品「P ...

  5. MySQL 高级查询截取分析

    慢日志分析流程如下:[1]观察(至少跑一天),看看生产慢 SQL 情况.[2]开启慢查询日志,设置阈值,比如对超过5秒的 SQL 语句进行抓取.[3]explain+慢 SQL 分析.[4]show ...

  6. Hugging News #0324: 🤖️ 黑客松结果揭晓、一键部署谷歌最新大语言模型、Gradio 新版发布，更新超多！

    每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...

  7. js面试题学习整理

    1. 异步操作有哪些? 回调函数,事件监听,promise,ajax,async,setTimeout,Generator 2. Promise是什么? Promise是异步编程的一种解决方案. 从语 ...

  8. Nordic nRF52系列/nRF5340硬件设计（一）选型及原理图设计

    Nordic 的BLE系列芯片从第一代的nRF51系列,到第二代的nRF52系列,发展到目前最新的第三代的nRF5340.目前市场中使用最多的nRF52系列一共有七款芯片,它们是:nRF52805.n ...

  9. postgresSQL Extended Query执行过程和sharding-proxy的处理

    pg Extended Query PostgreSQL: Documentation: 15: 55.2. Message Flow 多个阶段,可复用 Parse → DESCRIBE statem ...

  10. 深入理解 python 虚拟机：字节码教程(2)——控制流是如何实现的？

    深入理解 python 虚拟机:字节码教程(2)--控制流是如何实现的? 在本篇文章当中主要给大家分析 python 当中与控制流有关的字节码,通过对这部分字节码的了解,我们可以更加深入了解 pyth ...