一.项目打包(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. decay_rate， decay_steps ，batchsize，iteration，epoch

    (96条消息) decay_rate, decay_steps ,batchsize,iteration,epoch_hellocsz的博客-CSDN博客_decay_steps (1)batchsi ...

  2. MySQL 导出数据结构 If you don't want to restore GTIDs, pass --set-gtid-purged=OFF.

    应用场景MYSQL导出数据结构 Warning: A partial dump from a server that has GTIDs will by default include the GTI ...

  3. 07-Spring的事务处理

    Spring中提供了七种事务的传播行为: PROPAGATION_REQUIRED:默认值,最常用,统一事务,出现异常,全部回滚 其余参考Spring事务处理word文档. 0.原转账业务(不含事务处 ...

  4. egret 图片跨域

    //图片跨域 egret.ImageLoader.crossOrigin = "anonymous";

  5. DRF_序列化and反序列化之高级

    1. source用法 序列化器内的使用 book_name = serializers.CharField(max_length=8, min_length=3,source='name')这个用来 ...

  6. 前端程序员需要了解的MySQL

    数据库的基本概念 数据库(database)是用来组织.存储和管理数据的仓库.对数据库中的数据可以进行增删改查操作.市面上常见的数据库有: MySQL(使用最广泛.流行度最高的开源免费数据库 Comm ...

  7. 文件的上传&预览&下载学习（四）

    0.参考博客 https://blog.csdn.net/Chengzi_comm/article/details/53037967 逻辑清晰 https://blog.csdn.net/alli09 ...

  8. vivo 短视频用户访问体验优化实践

    作者:vivo 互联网运维团队- Hu Tao 本文介绍了vivo短视频用户访问体验优化的实践思路,并简单讲解了实践背后的几点原理. 一.背景 我们平时在看抖音快手视频的时候,如果滑动到某个视频画面一 ...

  9. java网络编程--5 URL 下载网络资源

    java网络编程--5 URL 下载网络资源 1.8.URL 统一资源定位符,定位互联网的某一个资源 DNS域名解析 www.baidu.com -->xxx.xxx.xxx.xxx // 协议 ...

  10. java网络编程--2 IP,端口，通信协议，TCP/UDP对比

    java网络编程--2 IP,端口,通信协议,TCP/UDP对比 1.3.IP ip地址:InetAddress 唯一定位一台网络上的计算机 127.0.0.1 :本机localhost IP地址的分 ...