一.项目打包(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. PYQT搭建相关记录

    class Demo(QWidget): def __init__(self): super(Demo, self).__init__() # 设置标题 icon 尺寸 self.setWindowT ...

  2. class1,2,3,4,5,6，7

    //测试你是哪一类学者 #include<stdio.h> int main() { int ans; char words[5000]; printf("网课学习让一些人喜一些 ...

  3. mock数据规则

    Mock数据规则 随机生成100条内的list数据 let Mock = require("mockjs"); let basicData = Mock.mock({ " ...

  4. nginx按天输出日志

    直接在nginx配置文件中,配置日志循环,而不需使用logrotate或配置cron任务.需要使用到$time_iso8601 内嵌变量来获取时间.$time_iso8601格式如下:2015-08- ...

  5. appium之元素定位方法

    做App UI自动化的时候,appium使用最频繁的应该就是定位元素了. Appium常用的元素属性值: resource-id:resource-id属性一般ID是唯一的,如果元素中有ID的话,优先 ...

  6. 【BUUCTF]ACTF2020 新生赛Exec1write up

    根据题目分析,俺们要用ping命令! 打开靶机,输入127.0.0.1尝试提交,直接出现无过滤: 尝试管道符执行命令,常见管道符: 1.|(就是按位或),直接执行|后面的语句 2.||(就是逻辑或), ...

  7. laravel groupBy 分页

    $model=DB::table('tablebname') ->where(function($query) use ($res){ $query->where('xx','xx'); ...

  8. Python：logging简要版

    日志等级(从低到高):DEBUG < INFO < WARNING < ERROR < CRITICAL 1.调试时,可记录DEBUG.INFO类的信息 2.投入使用,建议使用 ...

  9. Android笔记--如何在Android studio里面打开数据库

    具体操作 可参考这篇(更为详细): https://www.cnblogs.com/liuzijin/p/17029231.html 1.找到界面内的Device File Explorer 这里找可 ...

  10. Java笔记第十三弹

    函数式接口 有且仅有一个抽象方法的接口 适用于Lambda使用的接口 @FunctionalInterface//表示函数式接口 函数式接口作为方法的参数 public class Main{ pub ...