Vue项目打包部署到服务器

1. Vue项目打包部署到服务器

1.1. 配置

(1)修改package.json文件同级目录下的vue.config.js文件。

// vue.config.js
module.exports = {publicPath: './',
}

在这里插入图片描述
(2)检查router下的index.js文件下配置的mode模式。
  检查如果模式改为了history模式,打包后的页面为空,将其注释,使用默认的hash模式即可
在这里插入图片描述
(3)在README.md文件下点击npm run build 打包,或者在命令行输入。
在这里插入图片描述
在这里插入图片描述
(4)目录中多一个dist文件夹即为打包成功。
在这里插入图片描述

1.2. 测试

  测试一下,浏览器打开网址链接即可。
在这里插入图片描述

2. history模式部署

  默认情况下,Vue项目使用的是hash路由模式,就是URL中会包含一个#号的这种形式。#号以及之后的内容是路由地址的hash部分。正常情况下,当浏览器地址栏地址改变,浏览器会重新加载页面,而如果是hash部分修改的话,则不会,这就是前端路由的原理,允许根据不同的路由页面局部更新而不刷新整个页面。H5新增了history的pushState接口,也允许前端操作改变路由地址但是不触发页面刷新,history模式即利用这一接口来实现。因此使用history模式可以去掉路由中的#号。

2.1. 项目配置

  在vue-router路由选项中配置mode选项和base选项,mode配置为’history’;如果部署到非域名根目录,还需要配置base选项为前文配置的publicPath值(注意:此情况下,publicPath必须使用绝对路径/test的配置形式,而不能用相对路径./)
在这里插入图片描述

2.2. nginx配置

  对于history模式,假设项目部署到域名下的/test目录,访问http://xxx/test/about的时候,服务器会去找/test指向的目录下的about子目录或文件,很显然因为是单页面应用,并不会存在a这个目录或者文件,就会导致404错误:
在这里插入图片描述
  Vue项目部署后页面找不到
  我们要配置nginx让这种情况下,服务器能够返回单页应用的index.html,然后剩下的路由解析的事情就交给前端来完成即可。
在这里插入图片描述
  history模式nginx配置
  这句配置的意思就是,拿到一个地址,先根据地址尝试找对应文件,找不到再试探地址对应的文件夹,再找不到就返回/test/index.html。再次打开刚才的about地址,刷新页面也不会404啦:
在这里插入图片描述

3.3. history模式部署到非域名根路径下

  非域名根目录下部署,首先肯定要配置publicPath。需要注意的点前面其实已经提过了,就是这种情况下不能使用相对路径./或者空串配置publicPath。为什么呢?原因是它会导致router-link等的表现错乱,使用测试项目[2]分别使用两种配置打包发布,审查元素就能看出区别。在页面上有两个router-link,Home和About:
在这里插入图片描述

3.4. 两种配置打包后的结果如下。

(1)publicPath配置为./或者空串:
在这里插入图片描述
(2)publicPath配置为/test:
在这里插入图片描述
  publicPath配置为相对路径的router-link打包后地址变成了相对根域名下地址,很明显是错误的,所以非域名根路径部署应该将publicPath配置为完整的前缀路径。

3. Vue项目打包部署问题总结

3.1. 项目配置

  为了解决打包后资源路径不对的问题,需要在vue.config.js中配置publicPath,这里有两种配置方式,分别将publicPath配置为./和/test:

const {defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,// 部署生产环境和开发环境下的URL。// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。publicPath: process.env.NODE_ENV === "production" ? "./" : "/",// publicPath:  "./",// 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)//outputDir: "dist",// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)//assetsDir: "static",// 是否开启eslint保存检测,有效值:ture | false | 'error'//lintOnSave: process.env.NODE_ENV === "development",lintOnSave: false,
})

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/489329.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

rk3588-ubuntu22.04系统网关实现路由器功能:

rk3588-ubuntu22.04系统网关实现路由器功能: 场景需求描述: 需求背景: 场景一:通过网线eth0/(路由器wlan0)访问外网: 如果网关 和 设备所处的环境可以通过网线联网或者路由器联网,那么不需要将网关配置成…

GIF制作工具推荐与详细使用教程

引言 GIF(Graphics Interchange Format)是一种广泛使用的图像格式,常用于创建动画或短视频片段。无论你是想制作表情包、动画教程还是简单的动画效果,选择一个合适的GIF制作工具是关键。下面我们将推荐几款免费且易用的GIF制作工…

打卡第十二天 P1012 [NOIP1998 提高组] 拼数

题目描述 设有 n 个正整数 ,将它们联接成一排,相邻数字首尾相接,组成一个最大的整数。 输入格式 第一行有一个整数,表示数字个数 n。 第二行有 n 个整数,表示给出的 n 个整数 。 输出格式 一个正整数&#xff0c…

【每日刷题】Day169

【每日刷题】Day169 🥕个人主页:开敲🍉 🔥所属专栏:每日刷题🍍 🌼文章目录🌼 1. 718. 最长重复子数组 - 力扣(LeetCode) 2. 2269. 找到一个数字的 K 美丽值…

SeaTunnel Web1.0.0安装

部署seatunnel2.3.8参考:部署seatunnel2.3.8-CSDN博客 SeaTunnel Web1.0.1对应的seatunnel2.3.3版本,所以如果要想在SeaTunnel Web1.0.1上能正常跑seatunnel对应版本包,在seatunnel上传的connector-开头的包,都得跟着SeaTunnel Web依赖的版本走,如安装了seatunnel2.3.7但…

AI大模型学习笔记|多目标算法梳理、举例

多目标算法学习内容推荐: 1.通俗易懂讲算法-多目标优化-NSGA-II(附代码讲解)_哔哩哔哩_bilibili 2.多目标优化 (python pyomo pareto 最优)_哔哩哔哩_bilibili 学习笔记: 通过网盘分享的文件:多目标算法学习笔记 链接: https://pan.baidu.com…

Go 语言与时间拳击理论下的结对编程:开启高效研发编程之旅

一、引言 结对编程作为一种软件开发方法,在提高代码质量、增强团队协作等方面具有显著优势。而时间拳击理论为结对编程带来了新的思考角度。本文将以 Go 语言为中心,深入探讨时间拳击理论下的结对编程。 在当今软件开发领域,高效的开发方法和…

基于Java的世界时区自动计算及时间生成方法

目录 前言 一、zoneinfo简介 1、zoneinfo是什么 2、zoneinfo有什么 二、在Java中进行时区转换 1、Java与zoneInfo 2、Java展示zoneInfo实例 3、Java获取时区ID 三、Java通过经纬度获取时区 1、通过经度求解偏移 2、通过偏移量计算时间 3、统一的处理算法 四、总结 …

PostgreSQL的学习心得和知识总结(一百六十四)|深入理解PostgreSQL数据库之在 libpq 中支持负载平衡

目录结构 注:提前言明 本文借鉴了以下博主、书籍或网站的内容,其列表如下: 1、参考书籍:《PostgreSQL数据库内核分析》 2、参考书籍:《数据库事务处理的艺术:事务管理与并发控制》 3、PostgreSQL数据库仓库…

BERT:用于语言理解的深度双向 Transformer 的预训练。

文章目录 0. 摘要1. 介绍2. 相关工作2.1 无监督的基于特征的方法2.3 无监督微调方法2.3 从受监督数据中迁移学习 3. BERT3.1 预训练 BERT3.2 微调 BERT 4. 实验4.1 GLUE4.2 SQuAD v1.14.3 SQuAD v2.04.4 SWAG 5. 消融研究5.1 预训练任务的影响5.2 模型大小的影响5.3 使用 BERT …

QT图形/视图架构详解(一)

场景、视图与图形项 图形/视图架构主要由 3 个部分组成,即场景、视图和图形项,三者的关系如图所示: 场景、视图和图形项的关系 场景(QGraphicsScene 类) 场景不是界面组件,它是不可见的。场景是一个抽象的…

Towards Frame Rate Agnostic Multi-object Tracking—迈向帧率无关的多目标跟踪

Towards Frame Rate Agnostic Multi-object Tracking—迈向帧率无关的多目标跟踪 发表在IJCV 2023年 作者:Weitao Feng, Lei Bai, Yongqiang Yao, Fengwei Yu & Wanli Ouyang 研究目标:多目标跟踪的帧率无关性研究 IJCV 在计算机视觉领域的影响力非常…

最新消息!ChatGPT已集成到苹果操作系统!

12月11日,OpenAI宣布ChatGPT将集成到苹果iOS、iPadOS和macOS操作系统中,用户可以直接在这些设备上访问ChatGPT的功能。 通过此次宣布内容来看,ChatGPT不再局限于单独的应用程序,用户可以在苹果设备上更便捷地使用它。这意味着&…

该用户不拥有该设备20018

调用接口查询或操作托管设备时报错无权限 第一步:确认调用接口需要的权限 这里以关闭设备加密接口为例:/api/lapp/device/encrypt/off,官网接口文档上注明了需要Config权限。注:调用此类接口时需要用使用大账号token,不…

【MySql】数据库索引概念及其作用详细介绍

目录 1. 为什么使用索引 2. 索引及其优缺点 2.1 索引的概述 2.2 优点 2.3 缺点 3. InnoDB中索引的推演 3.1 索引之前的查找 3.2 设计索引 1. 一个简单的索引设计方案 2. InnoDB中的索引方案 3.3 常见索引概念 1.聚簇索引 2.二级索引(辅助索引、非聚簇索引) 3.联合…

ESP32外设学习部分--SPI篇

SPI学习 前言 我个人以为开始学习一个新的单片机最好的方法就是先把他各个外设给跑一遍,整体了解一下他的功能,由此记录一下我学习ESP32外设的过程,防止以后忘记。 SPI 配置步骤 SPI总线初始化 spi_bus_config_t buscfg {.miso_io_num …

vue3+setup使用rtsp视频流实现实时监控,全屏,拍摄,自动拍摄等功能(纯前端)

vue3setup使用rtsp视频流实现实时监控,全屏,拍摄,自动拍摄等功能(纯前端) 概要 本文介绍了如何在Vue应用中通过WebRTC技术获取摄像头的rtsp视频流,同时展示了实时监控,全屏,拍摄,自动拍摄等功…

【源码阅读系列】(五)进程间通信(二)

进程间通信(二) 这一部分主要会介绍Android中特有的几个IPC机制。分别是: Intent、Binder、AIDL、ContentProvider https://juejin.cn/post/7244018340880007226 https://juejin.cn/post/6844903764986462221 Binder https://juejin.cn/post/7244018340880007226 https://j…

机器学习(ML)在发射机识别与资源管理的应用

电子战(EW)涉及在受干扰的频谱环境中,通过多个无线电频率传感和发射平台进行非合作交互。操作人员需要管理频谱资源、共享关键情报,并有效干扰威胁发射器。现代RF系统的复杂性和威胁发射器的敏捷性,要求系统能够以机器…