位置: IT常识 - 正文

Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)(vue3.0 vite)

编辑:rootadmin
Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看) 一、环境 😄 😄 😄

推荐整理分享Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)(vue3.0 vite),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3项目案例,vite搭建vue3,一个完整的vue项目介绍,vue3.0项目,vuevant项目,vue3.0 vite,vite搭建vue3,vue3.0 vite,内容如对您有帮助,希望把文章链接给更多的朋友!

这里因为我们有的小伙伴可能不太需要服务器,单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上,有很多方式,自行百度。你也可以购买阿里云或者腾讯云。逻辑都是一样的,我这里使用的虚拟机+centos系统,我已经提前在自己的机器安装好了。感兴趣的小伙伴可以看我Node.js专栏。里面有从虚拟机、centos到一些开发工具的详细安装步骤。特别是我们这篇文章中要用到的nginx服务器。

二、nginx 😏 😏 😏

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。​ 是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好。

三、为什么使用nginx代理 😜 😜 😜

我们在开发环境通常经过配置以后就能正常与后端进行交互,那是因为我们使用的工具提供了proxy做代理从而解决了开发环境的跨域请求问题。项目上线以后需要我们重新做处理,这时候nginx就该出场了。

1、前后端分离 ✨ ⭐️ 🌟

Vue项目一般是前端项目,需要与后端项目进行数据交互,而后端项目一般是通过API接口提供数据服务,需要通过nginx代理将API请求转发到后端项目。

2、跨域问题 ✨ ⭐️ 🌟

由于浏览器的同源策略,Vue项目无法直接访问第三方接口或其他域名下的资源,需要通过nginx代理进行跨域访问。

3、静态资源缓存 ✨ ⭐️ 🌟

nginx可以对静态资源进行缓存,减少服务器压力和提高网站性能。Vue项目中的静态资源包括js、css、图片等文件,通过nginx代理可以实现缓存功能。

4、负载均衡 ✨ ⭐️ 🌟

如果Vue项目需要部署在多台服务器上,可以通过nginx实现负载均衡,将请求分发给不同的服务器,提高系统的可用性和稳定性。

四、项目打包 😬 😬 😬

我这里的话已经搭建好项目,并且做了动态路由、国际化等等。需要的话小伙伴可以看 👉 👉 👉Vue3全家桶

1、项目配置,修改vite.config.ts 👇 👇 👇 Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)(vue3.0 vite)

自己看代码注释哈,配置有一项proxy,它呢只会和我们开发有关系,发到nginx以后是一点都用不到它的。

import { defineConfig, loadEnv } from 'vite'import path from 'path'import vue from '@vitejs/plugin-vue'import Icons from 'unplugin-icons/vite'import IconsResolver from 'unplugin-icons/resolver'import AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'import vueJsx from '@vitejs/plugin-vue-jsx';const pathSrc = path.resolve(__dirname, 'src')import tsStart from './src/plugin/vitePlugin/ts-start'import tsBuild from './src/plugin/vitePlugin/ts-build'export default ({ mode }: ImportMetaEnv) => defineConfig({ base: './', // 在开发或生产中使用的基本公共路径。 resolve: { alias: { '@': pathSrc, // 文件系统路径别名 } }, plugins: [ AutoImport({ imports: ['vue'], resolvers: [ ElementPlusResolver(), IconsResolver({ prefix: 'Icon' }) ], dts: path.resolve(pathSrc + '\\\autoImport', 'auto-imports.d.ts') }), Components({ resolvers: [ ElementPlusResolver(), IconsResolver({ enabledCollections: ['ep', 'carbon', 'noto'] }) ], dts: path.resolve(pathSrc + '\\\autoImport', 'components.d.ts') }), Icons({ autoInstall: true, compiler: 'vue3' }), vue(), vueJsx(), // 支持jsx、tsx的写法 tsStart(), tsBuild(), ], server: { host: '0.0.0.0', // 指定服务器应该监听哪个 IP 地址 port: 9527, // 指定开发服务器端口 strictPort: true, // 若端口已被占用则会直接退出 open: false, // 启动时自动在浏览器中打开应用程序 proxy: { '/api': { target: loadEnv(mode, process.cwd()).VITE_APP_SERVER_URL, // 后端服务实际地址 changeOrigin: true, //开启代理 rewrite: (path) => path.replace(/^\/api/, '') } } }, build: { outDir: 'ts-super-web', // 生成输出的根目录。如果该目录存在,则会在生成之前将其删除。 默认文件夹名称为dist target: 'esnext', terserOptions: { compress: { drop_console: true, // 生产环境去掉控制台 console drop_debugger: true, // 生产环境去掉控制台 debugger 默认就是true dead_code: true, // 删除无法访问的代码 默认就是true } }, chunkSizeWarningLimit: 2000, // 调整区块大小警告限制 }})2、项目根木下执行打包命令 👇 👇 👇 yarn build

这样我们就已经打包完成了,在项目根目录下会产生一个ts-super-web的文件夹,也就是我们在vite.config.ts中配置的outDir。控制台输出的菩萨图像是我单独做了一个插件,感兴趣的小伙伴可以看我的另一篇文章。👉 👉 Vite4自定义插件之终端打印自定义logo(图案)

五、部署项目 ⚡️ ⚡️ ⚡️1、传输打包文件到服务器 👇 👇 👇 

这里我们可以使用Xftp或者Xshell把文件传输到服务器上,建议使用Xftp,因为不用压缩文件直接传输到指定文件夹。我在服务器home下建立了一个web文件夹。通过Xftp直接右键就可以建立。

 2、配置nginx 👇 👇 👇 

直接在服务器终端或者Xshell工具执行下面的命令编辑nginx配置文件

vim /usr/local/nginx/conf/nginx.conf

进入文件以后按 i 键,编辑完成以后按ESC键输入:wq按回车即可。

配置文件中项目的配置是非常简单的,因为我们这里没有涉及到接口。所以root只要指向我们打包文件路径的上一级目录即可。

退出以后接着执行命令重启nginx

/usr/local/nginx/sbin/nginx -s reload# 查看虚拟机的ipifconfig

到这里配置就完成了,我们浏览器直接输入服务器IP:8080/ts-super-web

发布到线上,之前做的动态路由、状态管理、国际化等都是没有任何问题的。

六、nginx配置接口反向代理

我演示的接口使用的是http://www.7timer.info/全球天气预测系统的接口,如果要用的小伙伴记得合理利用。其次这里只是一个demo,所以没有过多的配置其他复杂项,如果有需要的话可以联系我。

1、我二次封装的axios插件中,代理是根据环境获取的。所以打包应该对应的文件是.env.production

2、项目根目录下修改.env.productionVITE_NODE_ENV=productionVITE_APP_BASE_API=/apiVITE_APP_PREVENT_DUPLICATE_SUBMISSIONS=2000

根据上面的配置,我们需要在nginx中配置的代理就是/api,然后代理到http://www.7timer.info/。根据上面我们配置nginx的方法修改nginx.conf文件。对应的nginx如下图

location /api { proxy_pass http://www.7timer.info/;}3、效果

我是Etc.End。如果文章对你有所帮助,能否帮我点个免费的赞和收藏😍。同时欢迎各位小伙伴一起学习,一起成长WX:SH--TS

❤️ 💓 💗 💖 ✨ ⭐️ 🌟 💥 💥

本文链接地址:https://www.jiuchutong.com/zhishi/288979.html 转载请保留说明!

上一篇:THREE.JS实现看房自由(VR看房)(three.js 教程)

下一篇:el-card多个卡片布局(e卡 叠加)

  • 网易云私信怎么知道对方看没看(网易云私信怎么免打扰)

    网易云私信怎么知道对方看没看(网易云私信怎么免打扰)

  • 电脑cid是什么意思(电脑cid在哪)

    电脑cid是什么意思(电脑cid在哪)

  • 酷狗音乐和酷我音乐有什么区别(酷狗音乐和酷我音乐哪个更好)

    酷狗音乐和酷我音乐有什么区别(酷狗音乐和酷我音乐哪个更好)

  • oppo便签突然没了(oppoa11便签桌面上没有)

    oppo便签突然没了(oppoa11便签桌面上没有)

  • 音乐剪辑软件有哪些(音乐剪辑器免费版)

    音乐剪辑软件有哪些(音乐剪辑器免费版)

  • 钉钉系统繁忙请稍后再试(钉钉系统繁忙图片)

    钉钉系统繁忙请稍后再试(钉钉系统繁忙图片)

  • iphonex自动重启频繁(iphonex自动重启什么原因)

    iphonex自动重启频繁(iphonex自动重启什么原因)

  • 11pormax运行内存多少(苹果11promax系列运行内存)

    11pormax运行内存多少(苹果11promax系列运行内存)

  • 手机淘宝不显示待发货和待收货数量(手机淘宝不显示自动确认收货时间)

    手机淘宝不显示待发货和待收货数量(手机淘宝不显示自动确认收货时间)

  • ipad能读取u盘吗(ipad可以读取u盘吗)

    ipad能读取u盘吗(ipad可以读取u盘吗)

  • 微信与手机不兼容怎么办(微信手机不兼容安装不了咋办)

    微信与手机不兼容怎么办(微信手机不兼容安装不了咋办)

  • wan和lan是什么意思(wan 和 lan)

    wan和lan是什么意思(wan 和 lan)

  • 支付宝删好友还能转账吗(支付宝删好友还能看到步数吗)

    支付宝删好友还能转账吗(支付宝删好友还能看到步数吗)

  • 路由器正常亮几个灯(路由器正常亮几个绿灯)

    路由器正常亮几个灯(路由器正常亮几个绿灯)

  • r11听筒声音小怎么解决(r11听筒声音小怎么办)

    r11听筒声音小怎么解决(r11听筒声音小怎么办)

  • 爱奇艺弹幕颜色怎么改(爱奇艺弹幕颜色为什么不一样了)

    爱奇艺弹幕颜色怎么改(爱奇艺弹幕颜色为什么不一样了)

  • 封面无页码怎么设置(封面无页码怎么删除)

    封面无页码怎么设置(封面无页码怎么删除)

  • word兼容模式怎么取消(word兼容模式怎么回事)

    word兼容模式怎么取消(word兼容模式怎么回事)

  • 苹果7重启电量就变1(苹果重启电量更准确吗)

    苹果7重启电量就变1(苹果重启电量更准确吗)

  • 抖音怎么开通商品橱窗(抖音怎么开通商家卖货)

    抖音怎么开通商品橱窗(抖音怎么开通商家卖货)

  • jkmal00什么型号手机(jkmal00a)

    jkmal00什么型号手机(jkmal00a)

  • 微信朋友验证怎么看记录(微信朋友验证怎么解除)

    微信朋友验证怎么看记录(微信朋友验证怎么解除)

  • 音乐球球没有声音是怎么回事(音乐球球怎么玩的)

    音乐球球没有声音是怎么回事(音乐球球怎么玩的)

  • 去日本网络怎么解决(去日本网络怎么报备)

    去日本网络怎么解决(去日本网络怎么报备)

  • 交管12123怎么缴费(交管12123怎么缴款)

    交管12123怎么缴费(交管12123怎么缴款)

  • qq怎样获得内测资格(怎样获得qq内测版)

    qq怎样获得内测资格(怎样获得qq内测版)

  • 如何设置excel自动保存(如何设置excel自动填充)

    如何设置excel自动保存(如何设置excel自动填充)

  • 京东闪购是什么(京东闪购真的便宜吗)

    京东闪购是什么(京东闪购真的便宜吗)

  • 你需要权限来执行此操作删除不了(你需要权限来执行操作是怎么回事)

    你需要权限来执行此操作删除不了(你需要权限来执行操作是怎么回事)

  • 详细分析解决Uncaught SyntaxError: Cannot use import statement outside a module (at ...)的错误(unc方式)

    详细分析解决Uncaught SyntaxError: Cannot use import statement outside a module (at ...)的错误(unc方式)

  • DedeCMS 友情链接按分类网站类型调用的方法(html友情链接模板)

    DedeCMS 友情链接按分类网站类型调用的方法(html友情链接模板)

  • 第四季度所得税没有计提怎么做账
  • 企业所得税核定征收税率表最新
  • 法人是残疾人有什么优惠政策
  • 产权式酒店规定
  • 公司代缴个人所得税做账
  • 税收契子怎么算
  • 证券交易印花税税率是多少
  • 税负是什么意思举例子说明
  • 总公司和子公司可以有业务往来吗
  • 广告设计公司挣钱吗
  • 发票进项和销项差一个字
  • 进项税额销项税额月末需要结转吗
  • 一般纳税人收到普票需要价税分离吗
  • 签章是签字还是盖章z还是手印
  • 事业单位其他应付款如何核销
  • 法院判罚利息怎么算
  • 员工报销油费计入个税吗
  • 企业所得税前列支的费用
  • 税务行政强制行为遵循的原则
  • 用友t3财务报表模块打不开
  • 营业用房标准
  • 报税没有印花税怎么处理
  • 进项发票已经抵扣怎么做退回处理
  • 小微企业应纳税所得额不超过100万
  • 人力资源服务差额
  • 管理会计完全成本法和变动成本法例题
  • 工商年报人数是12月人数吗
  • 设备维修费增值税
  • rancher2教程
  • 进货折扣是怎么计算
  • 对公帐户定期存款利率
  • 购买商场储值卡能退么?
  • CodeIgniter与PHP5.6的兼容问题
  • 增量预算对应什么预算
  • 异地成立分公司的流程和要求
  • 世界著名气泡酒公司
  • php中execute
  • 废旧物资回收经营单位
  • thinkphp import
  • php注册功能的实现
  • vue脚手架和vue的区别
  • 公司账户转法人账户
  • 智能商亭超级大骗局
  • 将外购商品用于捐赠的分录
  • 研发支出什么时候转管理费用
  • 其他综合收益转入留存收益还是投资收益
  • 销售不动产预征率是多少
  • 写出php的常用四种基本变量类型
  • 织梦tag标签怎么用
  • 装订会计凭证步骤
  • 个体工商户具体工作内容怎么写
  • 总承包可以转包吗
  • 企业收到海河工厂发运的乙材料,并验收入库
  • 交易性金融资产属于流动资产
  • 临时售楼处需要什么手续
  • 融资租赁开具的发票内容
  • 公司向股东个人借款怎么做账
  • 出口退税申报需要手动录入什么信息呢
  • 开专票还要另外再交钱么
  • 样品制作公司
  • 工资计提数小于发放数,如何处理
  • 拆借 拆放
  • 时段与时点
  • 利得与损失的四种类型
  • 什么叫归集和分配
  • win7桌面计算机
  • win ubuntu
  • mac查看地址
  • linux重复命令
  • win70
  • win7系统玩游戏怎么样
  • win8没有开始菜单 点键盘开始菜单黑屏
  • opengl版本太低怎么升级
  • 检测输入条件的各种组合
  • css滑动门技术的步骤
  • python开发bi
  • python 列表排序 中文
  • 个人所得税父母双方专项扣除
  • 税务局监督执纪存在问题
  • 增值税发票报税流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设