一.项目打包(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. 使用*打印出2*n-1行的菱形

    /** * @Author * @Description //TODO 2*n+1菱形 * @Date * @Param int * @return **/ public static void pr ...

  2. Spring 常见问题 - 2

    1. @Component, @Controller, @Repository, @Service 有何区别? @Component:这将 java 类标记为 bean.它是任何 Spring 管理组 ...

  3. JSON常见用法

    https://blog.csdn.net/weixin_43631296/article/details/105253434

  4. tomcat非配置项的策略问题

    引用自:http://yaoyan.me/2017/04/Tomcat-config1/ tomcat非配置项的策略问题,参考官方文档:Non-Tomcat setting 大意如下: Tomcat配 ...

  5. idea 调试小心得

    1.为什么需要Debug 目的:开发过程中 查找或定位错误或者阅读源码 程序运行的结果(4种情况) 情况1:没有任何bug,程序执行正确! 情况2: 运行以后,出现了错误或异常信息.但是通过 日志文件 ...

  6. 面向对象分析与设计（V3）第一章：复杂性

    书名(中):面向对象分析与设计 书名(英):Object-Oriented Analysis and Design with Applications 作者:Grady Booch等 第一部分.概念 ...

  7. 使用Nginx实现本地目录映射

    如果文件是存储在服务器的某个位置,想提供pdf.jpg.png.mp4这些文件的预览功能,可以使用Nginx做虚拟映射,防止他人知道该文件的绝对路径. 如果想预览office文件,先将office文件 ...

  8. MySql生成ER【StarUML】文件

    1. 背景 要画ER图,一个个打费时费力,StarUML文件打开是json.那么就有可能自动生成. 2. 效果 把表结构生成好,自己只要维护关系即可. 3. 代码 import lombok.Data ...

  9. Windows 11 正式版(2021/10/19更新)

    Windows 11 (business editions), version 21H2 (updated October 2021) (x64) - DVD (Chinese-Simplified) ...

  10. Java项目是不是分布式，真有那么重要吗？

    大家好,我是3y啊. 大概不知道从什么时候,「微服务」「分布式」这两个词又再次频繁出现在我的视线里. 「微服务」「分布式」在我刚毕业的时候还是比较关注的,那时候还入门了一把SpringCloud,写了 ...