位置: 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卡 叠加)

  • 支付宝刷脸登录、刷脸支付功能怎么设置(支付宝刷脸登录用视频刷脸可以不)

    支付宝刷脸登录、刷脸支付功能怎么设置(支付宝刷脸登录用视频刷脸可以不)

  • 小米手机怎么解除禁止安装权限(小米手机怎么解开锁屏密码)

    小米手机怎么解除禁止安装权限(小米手机怎么解开锁屏密码)

  • 苹果手机怎么加密微信(苹果手机怎么加内存容量)

    苹果手机怎么加密微信(苹果手机怎么加内存容量)

  • 华为荣耀8x手机多少厘米(华为荣耀8x手机壳)

    华为荣耀8x手机多少厘米(华为荣耀8x手机壳)

  • ipad3现在太卡了(ipad3越来越卡怎么办)

    ipad3现在太卡了(ipad3越来越卡怎么办)

  • beats耳机长期没用无法充电(beats耳机长期不用)

    beats耳机长期没用无法充电(beats耳机长期不用)

  • nova7多少倍变焦(华为nova7多少倍数字变焦)

    nova7多少倍变焦(华为nova7多少倍数字变焦)

  • 关机了微信步数还会动吗(手机关机了微信步数)

    关机了微信步数还会动吗(手机关机了微信步数)

  • 华为手环怎么重启(华为手环怎么重置蓝牙)

    华为手环怎么重启(华为手环怎么重置蓝牙)

  • m4v用什么软件打开(m4v格式用什么软件输出)

    m4v用什么软件打开(m4v格式用什么软件输出)

  • 手机rcs是什么意思(手机rc是什么意思)

    手机rcs是什么意思(手机rc是什么意思)

  • 微信运动几分钟更新一次(微信运动几分钟更新步数)

    微信运动几分钟更新一次(微信运动几分钟更新步数)

  • 钉钉直播回放倍速怎么算时长(钉钉直播回放倍速播放会记完整时间吗)

    钉钉直播回放倍速怎么算时长(钉钉直播回放倍速播放会记完整时间吗)

  • 苹果蓝牙耳机容易掉吗(苹果蓝牙耳机容易坏不)

    苹果蓝牙耳机容易掉吗(苹果蓝牙耳机容易坏不)

  • 方舟编译器是什么(方舟编译器用处大么)

    方舟编译器是什么(方舟编译器用处大么)

  • 华为p40pro支持无线充电吗(华为p40pro支持无线投屏吗)

    华为p40pro支持无线充电吗(华为p40pro支持无线投屏吗)

  • 追加评价可以删除吗(追加评价可以删吗)

    追加评价可以删除吗(追加评价可以删吗)

  • 手机怎么查看特别关心我的人(手机怎么查看特斯拉哨兵模式)

    手机怎么查看特别关心我的人(手机怎么查看特斯拉哨兵模式)

  • 苹果手机忘记解锁密码怎么办(苹果手机忘记解锁密码怎么恢复出厂设置)

    苹果手机忘记解锁密码怎么办(苹果手机忘记解锁密码怎么恢复出厂设置)

  • GIF动画与flash动画有何区别(flash和gif的区别)

    GIF动画与flash动画有何区别(flash和gif的区别)

  • 360安全浏览器如何查看电视直播(360安全浏览器如何退出登录)

    360安全浏览器如何查看电视直播(360安全浏览器如何退出登录)

  • 微信里怎样做电子稿(微信里怎样做电子档发给老师)

    微信里怎样做电子稿(微信里怎样做电子档发给老师)

  • 乐视视频如何取消自动续费(乐视视频如何取消续费)

    乐视视频如何取消自动续费(乐视视频如何取消续费)

  • 头条上买的东西怎么查(在头条买的东西,在哪里能看到)

    头条上买的东西怎么查(在头条买的东西,在哪里能看到)

  • 圣伊莱亚斯国家公园中的铜河三角洲,阿拉斯加 (© Frans Lanting/plainpicture)(圣伊利亚斯山)

    圣伊莱亚斯国家公园中的铜河三角洲,阿拉斯加 (© Frans Lanting/plainpicture)(圣伊利亚斯山)

  • PHPCMS 如何引用图片?(php 引入)

    PHPCMS 如何引用图片?(php 引入)

  • 汇算清缴补交所得税会计分录小企业会计政策
  • 公司注销了账本还需保留吗
  • 金蝶固定资产折旧怎么修改
  • 委托加工物资增值税怎么算
  • 一般纳税人怎么转小规模
  • 税收用在哪些方面
  • 解除合同补偿金需要缴纳个税吗
  • 税交多了退税走到哪一流程了问谁
  • 银行利息收入可以开增值税专用发票
  • 过路过桥费抵扣2021新规定
  • 员工异地交纳保险怎么交
  • 分工分类法
  • 附赠产品销售是合法还是违法
  • 付敏科技有限公司官网
  • 企业为员工购买团体医疗险可以全额税前扣除
  • 业务招待费增值税是进项税吗
  • 减少其他应付款冲费用做以前年度损益调整如何做分录
  • 收回公司代垫职工款项怎么做凭证?
  • 固定资产折旧可以不留残值吗
  • 应补退所得税额是什么
  • 预缴企业所得税是含税数还是不含税
  • 费用转入本年利润
  • 交强险保单被保险人写谁都行?
  • php jquery教程
  • 权益法投资收益在年末确认
  • 哪个是发票抵扣项目
  • 房屋租赁经营要交哪些税
  • 处置二手固定资产
  • php处理数组的函数
  • 担保公司未到期责任准备金会计及税务处理案例
  • Joomla调用系统自带编辑器的实现方法
  • vue的foreach循环
  • 强大到无需疼无需宠,却幸运到有人宠有人疼什么意思
  • ChatGPT等大模型的模型量化:平滑量化法
  • vue和react差别
  • 微信自定义菜单在哪里
  • 事业结余对应政府会计哪个科目
  • 折旧提取后资金如何处理
  • 物流企业会计核算的具体内容包括
  • 完整财务报表包括哪几类
  • 资产负债表中应收账款的计算公式
  • centos上安装vscode
  • mac安装brew
  • 小规模申请一般纳税人怎么申请
  • 资产负债表日后事项是什么意思?
  • 小规模纳税人需要每月清卡吗
  • 抵扣的进项税如何做账
  • 记账凭证粘贴顺序银行回单
  • 进项税转出怎么交税
  • 货款收不回来了怎么做账
  • 实收资本的印花税什么时候申报
  • 金蝶软件标准版多少
  • 短期借款如何记账
  • 长期股权投资哪一章
  • 实收资本挂在其他应收款现在股权转让
  • 其他应收款科目核算哪些业务
  • 公司租的房子电费发票怎么开
  • 汇算清缴从业人数平均值怎么算
  • 企业建账目的
  • mysql5.7免安装版
  • mysql 错误1067
  • win8什么时候停止更新
  • win10系统崩溃怎么修复开不了机
  • 手动清洁cmos
  • mac如何中文输入法
  • linux-swap
  • centos 6.0
  • win8系统怎么到桌面
  • windows重大更新
  • linux用ssh登录不进去
  • winbox app
  • linux rpm -i
  • html中href,src区别
  • 安卓自定义ui
  • android应用市场有哪些
  • 税控盘丢失怎么写情况说明
  • 定期定额纳税申报表应税项应填哪个数
  • 从事农业种植是干什么的
  • 怎么删除天眼查诉讼信息
  • 互联网服务业有哪些行业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设