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.mzph.cn/web/63179.shtml

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

相关文章

NPU是什么?电脑NPU和CPU、GPU区别介绍

随着人工智能技术的飞速发展,计算机硬件架构也在不断演进以适应日益复杂的AI应用场景。其中,NPU(Neural Processing Unit,神经网络处理器)作为一种专为深度学习和神经网络运算设计的新型处理器,正逐渐崭露头…

使用skywalking,grafana实现从请求跟踪、 指标收集和日志记录的完整信息记录

Skywalking是由国内开源爱好者吴晟开源并提交到Apache孵化器的开源项目, 2017年12月SkyWalking成为Apache国内首个个人孵化项目, 2019年4月17日SkyWalking从Apache基金会的孵化器毕业成为顶级项目, 目前SkyWalking支持Java、 .Net、 Node.js、…

纯CSS实现文本或表格特效(连续滚动与首尾相连)

纯CSS实现文本连续向左滚动首尾相连 1.效果图&#xff1a; 2.实现代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, init…

【LeetCode刷题之路】622.设计循环队列

LeetCode刷题记录 &#x1f310; 我的博客主页&#xff1a;iiiiiankor&#x1f3af; 如果你觉得我的内容对你有帮助&#xff0c;不妨点个赞&#x1f44d;、留个评论✍&#xff0c;或者收藏⭐&#xff0c;让我们一起进步&#xff01;&#x1f4dd; 专栏系列&#xff1a;LeetCode…

Node.js基础入门

1.Node.js 简介 Node 是一个让 JavaScript (独立)运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。 简单的说 Node.js 就是运行在服务端的…

#思科模拟器通过服务配置保障无线网络安全Radius

演示拓扑图&#xff1a; 搭建拓扑时要注意&#xff1a; 只能连接它的Ethernet接口&#xff0c;不然会不通 MAC地址绑定 要求 &#xff1a;通过配置MAC地址过滤禁止非内部员工连接WiFi 打开无线路由器GUI界面&#xff0c;点开下图页面&#xff0c;配置路由器无线网络MAC地址过…

Qt-chart 画折线图(以时间为x轴)

上图 代码 #include <iostream> #include <random> #include <qcategoryaxis.h>void MainWindow::testLine() {//1、创建图表视图QChartView* view new QChartView(this);//2.创建图表QChart* chart new QChart();//3.将图表设置给图表视图view->setCh…

up主亲测,ToDesk/青椒云/顺网云这三款云电脑玩转AIGC场景

文章目录 1. 前言2. 云电脑性能分析3. 基础硬件数据3.1 硬件配置3.2 AI 评测跑分 4. 云电脑 AIGC 上手实测4.1 ToDesk4.1.1 AIGC 技术集成情况4.1.2 界面及功能4.1.3 项目部署4.1.4 黑神话悟空 AI 换脸4.1.6 AIGC 文生图体验 4.2 青椒云4.2.1 AIGC 技术集成情况4.2.2 界面及功能…

C++(十八)

前言&#xff1a; 本文依据上一篇&#xff0c;继续对C中的函数进行学习。 一&#xff0c;内联函数。 再执行函数代码时&#xff0c;比不使用函数花费了更多时间&#xff0c;因为总结步骤&#xff0c;传递参数和返回值都很花费时间。 因此&#xff0c;在调试小型函数时&…

数独游戏app制作拆解(之一)——功能介绍

android studio版本&#xff1a;2023.3.1 例程名称&#xff1a;shudu666 前阵子作了一个EXCEL版的数独&#xff0c;再早之前就想作这个数独app,但一直没动手&#xff0c;一方面懒&#xff0c;另一方面我把自己绕到坑里了&#xff0c;之前做的是一解数独的app,那个是有点难&am…

Python随机抽取Excel数据并在处理后整合为一个文件

本文介绍基于Python语言&#xff0c;针对一个文件夹下大量的Excel表格文件&#xff0c;基于其中每一个文件&#xff0c;随机从其中选取一部分数据&#xff0c;并将全部文件中随机获取的数据合并为一个新的Excel表格文件的方法。 首先&#xff0c;我们来明确一下本文的具体需求。…

构建树莓派温湿度监测系统:从硬件到软件的完整指南

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

28. Three.js案例-创建圆角矩形并进行拉伸

28. Three.js案例-创建圆角矩形并进行拉伸 实现效果 知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染 3D 场景的主要渲染器。 构造器 WebGLRenderer( parameters : Object ) 参数类型描述parametersObject渲染器的配置参数&#xff0c;可选。 …

开源Java快速自测工具,可以调用系统内任意一个方法

java快速测试框架&#xff0c;可以调到系统内任意一个方法&#xff0c;告别写单测和controller的困扰。 开源地址&#xff1a;https://gitee.com/missyouch/Easy-JTest 我们在开发时很多时候想要测试下自己的代码&#xff0c;特别是service层或者是更底层的代码&#xff0c;就…

004 QT常用控件Qwidget_上

文章目录 前言控件概述QWidgetenable属性geometry属性windowTitle属性windowlcon属性 小结 前言 本文将会向你介绍常用的Qwidget属性 控件概述 Widget 是 Qt 中的核心概念. 英文原义是 “⼩部件”, 我们此处把它翻译为 “控件” . 控件是构成⼀个图形化界面的基本要素. QWi…

Flash语音芯片相比OTP语音芯片的优势

Flash语音芯片和OTP语音芯片是两种常见的语音解决方案&#xff0c;在各自的应用领域中发挥着重要作用。本文‌将介绍Flash语音芯片相比OTP(One-Time Programmable)语音芯片的显著优势‌。 1‌.可重复擦写‌&#xff1a;Flash语音芯片的最大特点是支持多次编程和擦除&#xff0c…

【深度学习】深刻理解Swin Transformer

Swin Transformer 是一种基于 Transformer 的视觉模型&#xff0c;由 Microsoft 研究团队提出&#xff0c;旨在解决传统 Transformer 模型在计算机视觉任务中的高计算复杂度问题。其全称是 Shifted Window Transformer&#xff0c;通过引入分层架构和滑动窗口机制&#xff0c;S…

mysql客户端命令

目录 结束符 ; \g \G 中断输入 ctrl c 查看命令列表 help ? (\?) connect (\r) status (\s) delimiter (\d) exit (\q) quit (\q) tee (\T) ​编辑 notee (\t) prompt (\R) source (\.) system (\!) ​编辑 use (\u) help contents 结束符 ; \g \G 当我…

Tomcat原理(4)——尝试手动Servlet的实现

目录 一、什么是Servlet 1.servlet的定义 2.servlet的结构 二、实现servlet的流程图 三、具体实现代码 1、server 2.实体类request&response 3.HttpServlet抽象类 4.再定义三个servlet进行测试 Tomcat原理&#xff08;3&#xff09;——静&动态资源以及运行项…

D3 基础1

D3 D3.js (Data-Driven Documents) 是一个基于 JavaScript 的库&#xff0c;用于生成动态、交互式数据可视化。它通过操作文档对象模型 (DOM) 来生成数据驱动的图形。官方网站是 https://d3js.org/ <!DOCTYPE html> <html lang"en"><head><me…