一.项目打包(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. Leecode 21.合并两个有序链表（Java 迭代、递归两种方法）

      想法: 1.迭代 设两个指针pa和pb,不断移动pa和pb,并进行比较,则将较小元素接到新链表,该过程直至pa或pb为null,之后将未空的接到已空之后,得到升序链表   1 //官方: 2 cl ...

  2. arcengine标注转注记

    只是将在arcmap中添加注记的方式模拟了一遍,因此,首先显示标注(Label),而后将其转换为注记(Annotation)(Convert Label To Annotation) /******* ...

  3. Oracle coalesce函数 用于选取不为空的字段值

    coalesce(A,B)  若A为空则值为B 主流数据库系统都支持COALESCE()函数,这个函数主要用来进行空值处理,其参数格式如下: COALESCE ( expression,value1, ...

  4. group by和union，Laravel分页

    $res3 = DB::table('users') ->join('user_folow_boutiques', 'user_folow_boutiques.user_id', '=', 'u ...

  5. DNS BIND之dnssec安全

    公司一大早域名解析出问题了,网抓项目都无法抓取到进销存数据. 查询后发现是运维周末重启了dns服务. 网上找到的解决方法: 在BIND的配置文件(/etc/named.conf)中打开DNSSEC选项 ...

  6. QOE 驱动下的分布式实时网络构建：Agora SD-RTN 的演进

    编者按:近日,全球软件案例研究峰会在北京召开.全球软件案例研究峰会(简称"TOP100Summit")是科技界一年一度的案例研究榜单,每年甄选年度最值得借鉴的100个好案例,旨在揭 ...

  7. 协程 + epoll 的两个小例子

    getcontext/setupcontext/swapcontext/setcontext 方式的协程实现 #include <stdio.h> #include <stdlib. ...

  8. CMSGC-GCRoots-三色标记

    CMS收集器的特点:追求最短的停顿时间. CMS-Concurrent Mark Sweep 并发 标记 清除 标记垃圾的方式 标记清除:标记处需要回收的对象,标记完成后统一回收所有被标记的对象. 标 ...

  9. ArcGIS模型构建器ModelBuilder的使用方法

      本文介绍在ArcMap软件中,基于模型构建器(ModelBuilder)完成模型建立与使用的具体方法.   首先,在ArcMap软件中打开"ModelBuilder".   建 ...

  10. python入门教程之二十四Python MySQL - mysql-connector 驱动

    MySQL 是最流行的关系型数据库管理系统,如果你不熟悉 MySQL,可以阅读我们的 MySQL 教程. 本章节我们为大家介绍使用 mysql-connector 来连接使用 MySQL, mysql ...