Vite打包Vue3项目，利用宝塔部署到服务器

7月前作者：Alin_Wu_ 分类：Toy博客阅读(77) 违法举报

这篇具有很好参考价值的文章主要介绍了Vite打包Vue3项目，利用宝塔部署到服务器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Vite打包配置、打包

按照如图的配置，将vite.config.js的 base 改为 /dist/

然后npm run build

就会得到左边的这个dist文件夹，这就是打包好的文件

宝塔部署vue3项目,vue.js,前端,javascript,服务器,运维

二、创建项目

创建项目以及项目配置

我在服务器安装的php是5.6版本的，其他版本可以自己试一下

宝塔部署vue3项目,vue.js,前端,javascript,服务器,运维

宝塔部署vue3项目,vue.js,前端,javascript,服务器,运维

宝塔部署vue3项目,vue.js,前端,javascript,服务器,运维

解决刷新404问题

宝塔部署vue3项目,vue.js,前端,javascript,服务器,运维

    location / {
        # root定义网站根目录   html   即网页所在目录
        root   /www/wwwroot/test.com/dist;
        # index定义网站的首页   html/index.html
        index  index.html index.htm;
        # 避免f5刷新后404
        try_files  $uri  $uri/  /index.html;
    }

三、上传文件到服务器

宝塔部署vue3项目,vue.js,前端,javascript,服务器,运维

宝塔部署vue3项目,vue.js,前端,javascript,服务器,运维

上传成功之后，文件目录结构是这样的

宝塔部署vue3项目,vue.js,前端,javascript,服务器,运维

四、测试运行

宝塔部署vue3项目,vue.js,前端,javascript,服务器,运维

（顺序不一定要按照我写的顺序从上往下进行，反正最终的各种配置对得上就行）文章来源地址https://www.toymoban.com/news/detail-849496.html

到了这里，关于Vite打包Vue3项目，利用宝塔部署到服务器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

vite vue3项目打包,跳过ts检查

遇到这个问题是因为vue文件中script标签没有写lang造成的剩下的ts类型检查错误 \\\"build\\\": \\\"vue-tsc --noEmit --skipLibCheck vite build\\\",是因为这个vue-tsc打包对ts进行了类型检查，需要全部解决了才行，可以关闭，直接改成\\\"build\\\": \\\"vite build\\\",

2024年02月16日
浏览(54)
vite打包vue3项目白屏报错

资源路劲问题修改：vite.config.ts 原因是需要服务器进行静态资源访问，否则会因为跨域而报错： Access to script at \\\'file:///F:/Progremes/Vue3/yanxuan_vue3_m_h5/dist/assets/index-49de958d.js\\\' from origin \\\'null\\\' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated

2024年02月16日
浏览(56)
【Vue3实践】（六）Vue3使用vite处理环境变量、打包部署、nginx配置

由于在日常开发中会有一部分前端的开发任务，会涉及到Vue的项目的搭建、迭代、构建发布等操作，所以想系统的学习一下Vue相关的知识点，本专题会依照Vue的搭建、开发基础实践、进阶用法、打包部署的顺序进行记录。历史文章链接如下：《Vue3搭建、路由配置与基本语法

2023年04月08日
浏览(122)
如何使用Vite打包和部署项目到服务器二级路由

如果你想把你用Vite构建的项目部署到服务器的二级路由上，比如 http://demo.dev/admin/ ，你需要注意以下几个步骤：基础路径base是指你的项目在服务器上的相对路径，比如你的项目部署在 http://demo.dev/admin/ 上，那么你的基础路径就是 /admin/ 。你需要在两个地方配置基础路径

2024年02月04日
浏览(43)
vite+vue3+ts搭建项目八（打包性能优化三：使用CDN）

使用vite-plugin-cdn-import 下载npm包官方github：https://github.com/MMF-FE/vite-plugin-cdn-import 开发环境使用本地的npm包，cdn是打包时候才生效在vite.config.ts中通过importToCDN引入注意事项：网上很多教程，还需要在 build 的 rollupOptions 添加对应的 external ，如上注释所示，其实是不需要的，

2024年02月02日
浏览(95)
vue3项目vite.config.js配置“代理”、“端口”、“打包名”、“图片压缩”

前言我们在搭建vue3项目的时候不可避免的会遇到“代理”、“端口”、“打包名”、“图片压缩”等配置问题，本文逐一讲述该怎么样在vite.config.js中去配置。一、配置代理端口和代理转发 vite.config.ts添加如下代码 ts.config.json添加如下代码图片压缩先要引入vite-plugin-imagem

2024年02月07日
浏览(79)
electron+vue3全家桶+vite项目搭建【24】设置应用图标，打包文件的图标

demo项目地址在electron中，我们可以通过electron-builder的配置文件来设置打包后的应用图标因为mac环境下的图标需要特殊格式，这里我们可以利用electron-icon-builder进行配置 1.引入相关依赖加入安装过程中卡在了 phantomjs-2.1.1-windows.zip的下载，可以直接去github上下载这里我也放一

2024年02月17日
浏览(62)
vue3之vite创建h5项目1（创建vite项目、配置IP访问项目、配置多环境变量与预览打包生产效果、配置别名）

初始化项目模块添加环境变量文件，每个文件写入配置，定义 env 环境变量前面必须加 VITE_ dev环境 test环境 prod环境在项目根目录下创建 03-1：配置多环境变量之dev环境 .env.development 03-2：配置多环境变量之test环境 .env.test 03-3：配置多环境变量之prod环境 .env.production 03-4 修改

2024年02月02日
浏览(77)
如何把vue项目部署服务器（宝塔面板）上

首先我们把准备好的vue项目进行打包：输入命令：npm run build 生成dist文件二、进入宝塔管理界面，点击网站，然后点击添加站点三。按下面输入点设置四。输入好点添加，注意！！！test.com 可以，有些已经有的不可以（如dada.com)，且前面不能加www （1）这里需要

2024年02月12日
浏览(64)
VIte+Vue3 打包在FIle本地index.html打开项目（不需要起服务）

参考原文链接：https://www.jianshu.com/p/41dc11b94c92，增加了一些问题处理。一、安装插件二、配置 vite.config.js 三、路由配置（可选）如果你配置了路由， history 选 createWebHashHistory() 即可。四、修改打包后的 index.html 配置完前三个以后，就可以进行打包了。下面的那两个报错，

2023年04月22日
浏览(47)